Scroll Stat Reveal Story — Free Scroll-Triggered Counter Snippet (No Library)

Annual reports, pitch decks, and "by the numbers" pages all lean on the same trick: a big number that counts up the moment it enters view, so a static fact reads as a small, satisfying event. This snippet builds that pattern with nothing but a native IntersectionObserver and requestAnimationFrame — no GSAP, no counter library, no dependency at all.

Data lives in the markup, not a JS array

Each .srs-beat section carries its own data-target, and its number element carries optional data-prefix/data-suffix attributes. animateCount() reads straight off whichever element triggered, so adding a new stat beat is purely an HTML edit — there's no parallel JavaScript array to keep in sync, unlike patterns that store all step data in one big config object.

A middle-band observer decides when to fire

Every beat is watched with rootMargin: '-30% 0px -30% 0px', shrinking the observer's effective trigger zone to the vertical center 40% of the viewport. A stat only starts counting once it's genuinely centered where a reader's eyes would be, not the instant its top pixel appears at the bottom of the screen — the same middle-band technique scrollytelling libraries like scrollama use for step detection.

Count-once, not count-every-time

A WeakSet tracks which number elements have already animated, so scrolling back up and back down again never restarts the count-up — a real annual-report stat shouldn't visibly reset and recount every time a reader scrolls past it twice. The is-active class (which drives the fade/rise-in of the number and copy) still toggles freely both directions, so the visual reveal itself remains fully reversible even though the counting animation itself only ever plays once per stat.

`requestAnimationFrame` with manual easing, not `setInterval`

Each count-up runs its own requestAnimationFrame loop tracking elapsed time against a fixed 1400ms duration, applying an easeOutCubic curve (1 - (1-t)^3) so large numbers start fast and settle gently rather than ticking linearly, which reads as sluggish for big jumps like the funding total. Because it's driven by a real timestamp rather than a fixed tick count, the animation runs at a consistent speed regardless of the visitor's refresh rate.

Honest large-number formatting

formatValue() renders values a million or above as a decimal-and-M short form (matching the 12M API-requests stat) and everything else with locale-aware thousands separators via toLocaleString, so a number like 4,200,000 counts through readable intermediate values instead of a flickering raw integer.

Customizing it

Add beats freely — each just needs a data-target and optional prefix/suffix; nothing else in the JS needs to change. Pair with a scroll number odometer for a persistent header counter, or a scrollytelling chart if the stats should also visualize as a graph.