GSAP Animated Counter Stats Section with Rolling Digits
Overview
A stats section for React and Next.js where every digit rolls into place like a car odometer as you scroll to it. Figures sit in full-width rows, and hovering a row spins its number again.
Each digit is its own wheel. Digits further right spin more turns, so a figure settles from left to right the way an odometer does. Commas and decimal points stay still, and a rule draws across each row as it arrives.
Details
- Category
- Stats
- Interaction
- On Scroll + On Hover
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 047 / Gallery
GSAP Flip Filterable Portfolio Grid for React
On Click · On Scroll · On Hover
No. 074 / Pricing
GSAP Animated Pricing Section with Rolling Prices
On Click · On Scroll · Mouse Move
No. 087 / Team
GSAP Team Section with Names That Reveal Portraits
On Hover · On Click · On Scroll
(02)FAQ
GSAP Animated Counter Stats Section with Rolling Digits — FAQ
01What format can the numbers be in?
Any string: "1,240", "98.4", "3.2". Digits roll, and every other character is drawn as it is. Pass units such as % or ms through unit, which sets them smaller beside the figure.
02Why not count up with a number tween?
A counting tween changes the text every frame, so proportional digits make the figure jitter and it can't start out showing the right value. Rolling wheels keep the layout still, and the final number is already in the HTML.
03What do screen readers hear?
The stats are a description list. The wheels are hidden from assistive tech, and each figure is also written once as plain text, so it reads "Sites shipped, 1,240".
04What happens with reduced motion?
Nothing animates. The section renders with its final numbers, because that's its resting state.