Count-Up Stats
Scroll-triggered number counters that animate from zero to their target with locale-aware formatting, prefixes, suffixes, decimals, and staggered stat cards.
About This Effect
A polished stat counter effect that animates numbers from zero to their target value the moment they scroll into view. Built on GSAP and ScrollTrigger, each counter fires exactly once, formats values with locale-aware thousands separators, and supports currency prefixes, percentage suffixes, and decimal precision through simple data attributes. Stat blocks fade and rise in a staggered sequence as their numbers count, giving landing pages and about sections an instant feeling of momentum.
What's Included
- Scroll-triggered counting that fires once per stat, never replaying mid-read
- Locale-aware thousands separators via toLocaleString, with custom or disabled separators per counter
- Prefix and suffix support for currency symbols, percentages, and plus signs
- Decimal precision control with GSAP snap so values never show float noise
- Staggered group reveals from a single data-count-stagger attribute on any container
- Subtle fade-and-rise of each stat block synced to its counter
- Custom countup:start and countup:complete events for analytics or chained animations
- Accessible: prefers-reduced-motion users see exact final values immediately, no counting
Perfect For
- SaaS landing page metrics sections with staggered stat cards
- Agency about pages showing projects delivered and client satisfaction
- Annual report or investor pages with revenue and growth figures
- E-commerce social proof strips with download and review counts
- Nonprofit impact dashboards counting donations and people helped
How It Works
Each element with data-count-to gets a proxy counter object animated by gsap.to() with a snap value derived from its decimal precision, so the tween only ever produces valid displayable numbers. An onUpdate callback formats the current value with Intl-backed toLocaleString (or a custom separator) plus any prefix and suffix, and onComplete writes the exact target value to guarantee a clean final state. A single ScrollTrigger with once: true drives a timeline per group, offsetting each counter and its fade-and-rise block animation by the container's data-count-stagger interval, and gsap.matchMedia routes reduced-motion users to instant static values.