Scroll Data Story Counters — Free GSAP ScrollTrigger Scrub-Driven Metrics

Most "count up on scroll" effects trigger a fixed-duration animation once a number enters the viewport — useful, but the count-up always runs the same way regardless of exactly where or how fast you scrolled. This snippet does something different: every metric's displayed value is computed live, every frame, as a direct linear function of scroll progress, so scrubbing to any point in the pinned section deterministically produces the exact same numbers every time.

`scrub`, not `onEnter`, is the entire mechanism

A single ScrollTrigger with scrub: 0.3 covers the whole pinned section. Its onUpdate callback receives self.progress — a 0-to-1 value tied directly to scroll position — and for every metric computes from + (to - from) * progress, a plain linear interpolation. There is no duration, no easing curve, no "play once" state to track: the number at any scroll position is pure arithmetic on that position, which is what makes scrolling backward instantly and exactly reverse-correct rather than needing to "un-animate."

Four metrics, one shared progress value, zero drift

Every metric object in the METRICS array — users, revenue, countries, team size — reads the exact same p value inside the same onUpdate call. Because all four numbers, the year label, and the scrub-progress fill bar are derived from one shared variable in one function call, they can never fall out of sync with each other the way four independently-triggered count-up animations with different durations could.

Per-metric formatting, shared interpolation

Each metric supplies its own format(n) function — users abbreviate to K/M, revenue gets a dollar sign and one decimal, countries and team size round to whole numbers — while the interpolation math itself (from + (to - from) * progress) is completely generic and metric-agnostic. Adding a fifth metric is adding one object to the array with its own from, to, and format; the scrub loop needs no changes.

A light scrub value, not zero

scrub: 0.3 (rather than scrub: true, which is equivalent to instantaneous 1:1 tracking) adds a small easing lag that smooths out jittery trackpad or mouse-wheel input, without meaningfully breaking the "value equals position" contract — the lag settles within a couple hundred milliseconds, which is imperceptible compared to the multi-thousand-pixel scroll range the counters interpolate across.

How this differs from a count-up-on-enter pattern

The scroll stat reveal story snippet in this library counts up once, with its own fixed duration and easing, the first time a stat scrolls into view — good for a single dramatic reveal per stat. This snippet instead ties every value continuously to scroll position for the entire pinned section, better suited to narrating change *over* a range (a multi-year growth story) rather than revealing one static end value.

Customizing it

Add metrics to the array with their own from/to/format, and adjust START_YEAR/END_YEAR to match your real timeline — the year label interpolates with the exact same linear formula as every metric. Pair with a scroll company timeline immediately after for a milestone-by-milestone follow-up to the aggregate growth story.