From 0 to 1,000,000 in 2 seconds, with two decimal places of precision. Count-up animation is the soul of data display pages — but most implementations either stutter with setInterval or can't control the end value with CSS animations. Today we build a perfect version with requestAnimationFrame.
What Is It
Count-up Animation smoothly transitions a number from an initial value to a target value. Common use cases:
- Dashboard statistics
- Landing page "100K+ users" display
- Triggered when scrolled into view
Key Technical Points
- requestAnimationFrame: Syncs with screen refresh rate (~60fps), smoother than setInterval, auto-pauses when tab is hidden
- Easing function: easeOutQuart > easeOutCubic > linear
- tabular-nums: CSS equal-width digits prevent jitter
- toLocaleString: Auto thousand separators
- IntersectionObserver: Trigger only when visible
Common Pitfalls
- setInterval stutter: Must use requestAnimationFrame
- Float precision: Use toFixed or Math.round
- Repeat trigger: Use unobserve or flag
- Large number format: Use toLocaleString
- prefers-reduced-motion: Detect and skip to final value
更多Web组件，请访问 Web组件字典。
Read the full bilingual version at Deskless Daily.
Top comments (0)