Count-Up Stats on Scroll — IntersectionObserver + rAF

A grid of stat cards that count up from zero the moment they scroll into view is one of the most common trust-building devices on marketing and pricing pages — seeing "128,400+" animate into place reads as more credible than the same number sitting static on the page. This effect genuinely needs JavaScript: CSS counters cannot ease a numeric count-up with a duration and an easing curve on their own, so this snippet pairs a single shared IntersectionObserver with a hand-rolled requestAnimationFrame loop per counter.

One observer, many targets

A single IntersectionObserver instance watches every .rcs-num element via one querySelectorAll loop, exactly the pattern used in Reveal on Scroll — this scales far better than creating a new observer per stat, since the browser only has to maintain one set of intersection-tracking bookkeeping regardless of how many stat cards are on the page.

Reading configuration from data attributes

Each .rcs-num element carries its target value and formatting rules as data-* attributes — data-target, data-decimals, data-prefix, and data-suffix — rather than being hardcoded per counter in the JavaScript. This lets the exact same animateCount function correctly animate a plain integer ("128,400+"), a two-decimal percentage ("99.98%"), a millisecond figure ("42ms"), and a dollar amount ("$7,200,000") without any per-stat conditional logic.

Easing the count, not just linearly interpolating

animateCount computes progress from 0 to 1 across a fixed 1400ms duration, then applies a cubic ease-out — 1 - Math.pow(1 - progress, 3) — before multiplying by the target value. A raw linear count looks mechanical and finishes abruptly; the ease-out curve makes the count decelerate as it approaches its final value, which reads as more natural and gives the eye time to register the number settling.

obs.unobserve prevents repeat counting

Exactly as in a standard reveal-on-scroll pattern, observer.unobserve(el) is called immediately once a counter starts, ensuring each number counts up exactly once per page load — scrolling a stat card out of view and back in does not restart the animation, which would feel gimmicky on a second pass.

Respecting prefers-reduced-motion

Before deciding whether to animate, the script checks window.matchMedia('(prefers-reduced-motion: reduce)').matches once and, if true, sets every counter directly to its final formatted value with no requestAnimationFrame loop at all — users who have requested reduced motion see the correct number immediately rather than a suppressed but still-technically-running animation.

Why this needs JavaScript, unlike some other snippets in this series

Several of the newest snippets alongside this one lean entirely on native CSS animation-timeline: scroll() / view() for effects that only need to map scroll position to a CSS property. A numeric count-up is different: it needs to format numbers with commas, decimals, currency prefixes, and letter suffixes, none of which a CSS counter() or animation-timeline can express — so IntersectionObserver plus requestAnimationFrame remains the correct, and currently the only, tool for this specific effect.

Customizing it

Change duration for a faster or slower count, swap the ease-out cubic for a different easing function, or add a data-format="currency" attribute variant that routes through Intl.NumberFormat for locale-correct currency and grouping. Pair it with a Metric Card Grid or Hero Stats Counter Row layout.