How many counters on one screen?

One is clean. Three is the ceiling if they share a row and a single story. Six is a dashboard pretending to be a hero.

Should it count down?

Almost never. Down is for timers and stock.

What about decimals and commas?

Snap to the same precision you print. Keep the thousands separator stable.

Does it have to wait for scroll?

If the number is in view on load, play it then.

What does reduced motion do?

Show the final figure. No tick.

Counter

A counter ticks a number from a start value to its final figure, usually once, when the statistic enters the viewport, so the number arrives rather than sitting there from the first paint.

TextBuild difficulty: Easygsap.to

Also called Count up, Stats counter, Number ticker, Animated number, Scroll counter.

Here it is working.

128designers

joined this week

The figure rises. The unit, if you add one, stays still.

For designers

You reach for this on a single statistic that is actually the point: 12 years, 4 offices, 1 price. A row of 6 counters is a row of things competing to be looked at, and nobody reads the labels. If the reader needed the number to decide whether to stay, show the number. Keep the final figure in the document. Screen readers, copy and paste, and search should get 12, not 0 waiting for a tween that may never run.

Use this when

One number (maybe 3) is the reason someone stopped.
The count finishes in well under a second.
You can start it when the figure enters the viewport, and play it once.
Reduced motion can show the finished number with no tick.

Reach for something else when

The number is a label, a price in a table, or anything compared across rows. Set it in type.
You wanted words to arrive. Use Text reveal.
You wanted how far through a page or a task. Use Progress.
Named steps should play on scroll. Use Step-by-step timeline.
A whole block should arrive, number included. Use Element reveal.

How to build it

Write the finished number in the markup. Visually you can start from 0, but the accessible text is the end state. When the number enters the viewport, tween a dummy value and snap it to whole digits (or to 1 decimal if the figure really has one). ScrollTrigger plays that tween on enter. Play it once. Use tabular figures, or a reserved width, so commas do not make the line shiver. On reduced motion, show the finished number.

Official GSAP

gsap.to on a proxy object, snap or Math.round on innerText.

const proxy = { value: 0 };
gsap.to(proxy, {
  value: 128, duration: 1.6, snap: { value: 1 },
  onUpdate: () => { el.textContent = String(proxy.value); },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How many counters on one screen?: One is clean. Three is the ceiling if they share a row and a single story. Six is a dashboard pretending to be a hero.
Should it count down?: Almost never. Down is for timers and stock.
What about decimals and commas?: Snap to the same precision you print. Keep the thousands separator stable.
Does it have to wait for scroll?: If the number is in view on load, play it then.
What does reduced motion do?: Show the final figure. No tick.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: SVG draw path