Animated Counter
A number that counts up when it scrolls into view, with optional prefix/suffix, label and full typography control. Tabs: Content, Style, Animations, Advanced.
Rapidly ticking numbers are exactly the kind of movement that can bother visitors who've told their operating system they prefer reduced motion, even though the number itself is harmless. UnysonPlus's Animated Counter respects that prefers-reduced-motion setting and shows the final value right away instead of forcing the animation, and the number is rendered as real text either way so it's never lost to a screen reader. MDN: prefers-reduced-motion
Live demo​
▶ See the Animated Counter live on the demos site — an interactive example you can click through.
Content​
| Option | Choices |
|---|---|
| Number | Value to count up to (e.g. 45280, 96, 4.2) |
| Start From | Starting value (default 0) |
| Prefix | Text before the number (e.g. $) |
| Suffix | Text after the number (e.g. +, %, k) |
| Decimal Places | 0 · 1 · 2 · 3 |
| Thousands Separator | On/Off |
| Duration (ms) | Count-up animation length (default 2000) |
| Easing | Ease Out (fast → slow) · Linear · Ease In-Out |
Style​
Alignment (Left · Center · Right · Inherit), plus independent Font and Color for the Number, Prefix and Suffix.