v2 · scrollCounter · formattedCounting statistics up as they enter the viewport is the standard social-proof pattern, and it is usually a hand-rolled requestAnimationFrame loop plus an IntersectionObserver plus formatting logic. scrollCounter is those three things in one call, with a format function so 1200000 can render as $1.2M without you touching the animation.
A dark social proof section with 4 live counters — each with a different format function. Numbers count up from zero as the section scrolls into view. Cards also fade in with scrollAnimate.
import { scrollCounter, scrollAnimate } from 'svg-scroll-draw';
// Users — integer with locale formatting
scrollCounter('#users', {
to: 50_000,
format: n => Math.round(n).toLocaleString() + '+',
once: true,
});
// Satisfaction — fixed decimal percentage
scrollCounter('#satisfaction', {
to: 94.7,
format: n => n.toFixed(1) + '%',
once: true,
});
// KB size — prefix notation
scrollCounter('#size', {
to: 9,
format: n => '~' + Math.round(n),
once: true,
});
// Zero — counts down to 0 (dependencies)
scrollCounter('#deps', { to: 0, once: true });npm i svg-scroll-draw
MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →
Line chart that draws on scroll
Animate a line chart as it scrolls into view — axes first, then the data line tracing in with a colour shift. Copy-paste code, zero chart dependencies.
Animate any CSS property on scroll
Drive opacity, transform, colour or any unit value from scroll position. Staggered per-element triggers build a natural reveal. Copy-paste code.