Animated Stat Row — Free HTML CSS JS Dashboard Snippet

Numbers land harder when they animate. A row of KPI cards that fade up and count from zero to their value the moment they scroll into view is a staple of dashboards, landing pages, and annual reports — it draws the eye to the metrics and makes static figures feel alive. This component is a complete, responsive stat row: four cards with coloured icons, a count-up value, a label, and a period-over-period delta badge, that reveal with a stagger and count up using an eased animation, triggered by IntersectionObserver and respectful of reduced-motion preferences. It is built in HTML, CSS, and vanilla JavaScript.

Scroll-triggered, not on-load

The animation fires when the cards enter the viewport, not when the page loads — so if the stat row is below the fold, the count-up plays right as the user scrolls to it for maximum impact. IntersectionObserver watches each card with a threshold: 0.4 (40% visible), and on intersection it reveals and counts that card, then unobserves it so the animation runs exactly once. This is far more efficient than a scroll-position listener and guarantees the numbers are not already finished animating before the user ever sees them.

The eased count-up

countUp() drives the number with requestAnimationFrame, not setInterval — so it is synced to the display's refresh rate and never drops frames or drifts. Each frame computes progress t from performance.now() over a 1400ms duration, then applies an easeOutExpo curve (1 - 2^(-10t)): the number races up at the start and decelerates smoothly into its final value, which feels much more dynamic than a linear count. The displayed value is rounded and run through toLocaleString() so large numbers keep thousands separators, with optional prefix ($) and suffix (%) read from data attributes.

Data attributes drive everything

Each card declares its target in markup: data-to for the final number, data-prefix and data-suffix for formatting. The script reads these, so there is no hard-coded list in the JavaScript — to change a stat you edit the HTML. The value element uses font-variant-numeric: tabular-nums so every digit is the same width, which stops the card from jittering horizontally as the number rapidly changes during the count.

The staggered reveal

Cards do not all animate at once — each is delayed by its index times 120ms, so they cascade left to right. The reveal itself is CSS: cards start at opacity: 0 and translateY(14px) and transition to visible when the .in class is added, with a slight overshoot easing. The stagger plus the count-up together create the "dashboard coming to life" effect without any animation library.

Respecting reduced motion

Users who set prefers-reduced-motion: reduce (for vestibular comfort) should not be subjected to counting numbers and sliding cards. The script checks matchMedia('(prefers-reduced-motion: reduce)') and, when true, sets each value straight to its final figure with no count-up. The reveal transition is gentle enough to keep, but the potentially dizzying count animation is skipped — the accessible, considerate default.

The delta badges and customisation

Each card shows a coloured delta pill — green for up, red for down, grey for flat — to give the number context at a glance. Icons are tinted from a single --c custom property per card using color-mix for the soft background, so theming a card is one value. The row is a four-column grid that collapses to two columns under 760px and one under 380px. To use it, edit the cards' targets, labels, icons, colours, and deltas; the animation logic adapts automatically.