Turns a dry number into an eye-catcher: the figure counts up live from zero to its final value as soon as it scrolls into view. A prefix or suffix and decimals control the formatting. The technical name is GsapCounter.
Use GsapCounter for statistics you want visitors to notice — customer counts, uptime percentages, years of experience — anywhere a static number would get skimmed past. The count-up only triggers once the element scrolls into view, so it works the same whether the stat sits near the top of the page or further down.
A typical layout pairs several counters in a row, each with its own label underneath, for example "1,200+ customers", "99.9% uptime" and "24/7 support" side by side on an about or pricing page.
Where a counting number lands well
On a webshop, GsapCounter suits an "orders shipped" or "average rating" statistic near the top of a category or about page, giving a number that already reads as social proof extra visual weight. On a portfolio or agency site, "years of experience" or "projects completed" are the classic choices, usually placed just below the hero. On a professional services site, a satisfaction percentage or number of clients served works the same way — the animation draws attention to a figure that's meant to build trust at a glance.
A common mistake is using this block for every number on a page — when everything counts up, nothing feels special, and the effect stops reading as intentional. Match the animation duration to the size of the number too: a counter jumping to 99.9% in half a second looks abrupt, while a multi-thousand figure with too long a duration can feel sluggish; a couple of seconds is usually the right range. Keep decimals to what's meaningful — "99.9%" communicates precision, "99.87643%" just looks noisy.
GsapCounter is often combined with GsapReveal wrapping the surrounding card, so the whole stat block fades into place and then counts up, rather than the number appearing inside a card that's already static on screen. A row of counters pairs naturally with an Icon above each figure to visually separate what each statistic represents.
The final value is present in the markup, so even where the count-up animation is skipped or reduced, visitors and screen readers still get the correct number — the animation is a visual enhancement on top of real content, not a replacement for it.
Example
1.200+
customers
99,9%
uptime
The prompt for this example
Put two counters on the page that count up when they come into view: 1200+ customers and 99.9% uptime.