Count-up / rolling-number animation
Numbers that count upward or roll like an odometer until they land on the final value, often used for totals, scores, and stats.
See it
What it is
A count-up interpolates one numeric value to another, while a rolling number moves each digit through a vertical strip like a car odometer or a Solari split-flap board in a train station. Both make a changed total legible instead of replacing one string with another in a single frame.
Use the simpler count-up for dashboard metrics, fundraising totals, and completed progress. Use rolling digits when the object itself is the focus, such as a timer, score, or price. Format every visible frame with Intl.NumberFormat so separators, decimals, currency, and locale do not disappear during the animation.
Gotcha: changing digit widths make the row twitch, so use 'font-variant-numeric: tabular-nums'. Do not send every intermediate value through a live region; expose the settled value once and keep purely visual digit strips hidden from assistive technology. Skip straight to the result under reduced motion.
Ask AI for it
Animate this metric from its previous value to its new value with requestAnimationFrame over 700ms and an ease-out curve. Interpolate the numeric value, format each frame with Intl.NumberFormat using the metric's existing locale and currency options, and apply 'font-variant-numeric: tabular-nums' to prevent width jumps. Keep the animated copy 'aria-hidden', expose one screen-reader value containing only the final formatted number, cancel an active run before starting a new one, and render the final value immediately when 'prefers-reduced-motion: reduce' matches.