Count Up Animation — Free HTML CSS JS Snippet

A count-up animation makes numbers appear to count from zero to their final value — revenue, user counts, uptime, conversion rates. The animation transforms a static number into a moment that draws attention and makes metrics feel earned. This snippet is a more advanced version of the Stats Card count-up, with configurable prefix/suffix, multiple decimal places, and automatic M/K formatting. For a slot-machine roll instead of a smooth count, see the number slot machine.

The animation engine

countUp(el) reads four data attributes from the element: data-target (the final number), data-prefix (e.g. "$"), data-suffix (e.g. "%"), and data-decimal (decimal places to show). It uses performance.now() as the start time and requestAnimationFrame for smooth frame-by-frame updates over 1600ms.

The quartic ease-out function

const val = target * (1 - Math.pow(1 - p, 4)) is a quartic ease-out (power of 4). Compared to the cubic ease-out in the Stats Card, the quartic version accelerates harder at the start and decelerates more sharply near the end. This gives numbers a more dramatic "slamming into place" quality, which works well for hero section metrics.

Smart number formatting

The formatter auto-selects the right format: numbers 1,000,000+ show as 1.2M, numbers 1,000–999,999 use toLocaleString() for commas (24,891), and numbers below 1,000 use toFixed(decimal) for decimal precision. The prefix and suffix are applied from data attributes, so data-prefix="$" data-target="24891" displays as $24,891` without any code changes.

The replay button

A Replay button at the bottom calls runAll() which re-runs countUp() on all .number elements. Since countUp re-reads data-target and restarts performance.now(), each replay is independent with no state to reset.

Combining with IntersectionObserver

Wrap countUp(el) in an IntersectionObserver (as in the Stats Card snippet) to trigger the animation only when the stat enters the viewport. This prevents the animation from finishing before the user scrolls to see it.

The easing function

The count-up uses a quartic ease-out: at time t (0 to 1), progress = 1 - Math.pow(1 - t, 4). This function starts very fast (close to linear near t=0) and decelerates sharply near t=1. The dramatic deceleration makes the number feel like it's "settling" on its final value, creating a satisfying landing effect. Linear interpolation (just t) creates a mechanical feel; ease-out feels earned.

The M/K auto-formatter

Numbers over 999,999 display as "X.XM"; numbers over 999 display as "XK". The formatter runs on each animation frame: function fmt(n) { return n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? Math.round(n/1e3)+'K' : Math.round(n)+''; }. This ensures the displayed number never looks awkward at large values like "1,200,000" — it shows "1.2M" instead.

IntersectionObserver for scroll trigger

The count-up animation fires when the element scrolls into view using IntersectionObserver with threshold: 0.5. The observer disconnects after the first trigger to prevent re-animation on scroll back. This is a key UX decision — once a metric has counted up, it should stay at its target value to communicate stability.