Animated Counter

Animationsinline sandbox

A number counter that animates from 0 to the target value using GSAP. Great for statistics and metrics.

animated counter

odometer counter

number counter

react counter component

gsap animation

Preview

0123456789012

012345678901234567890123

0123456789012345678901234

Active Users

For best results, use tabular-nums font feature on the counter container.

This component requires GSAP 3.x or higher.

Use the shadcn CLI to install this component:

npx shadcn@latest add https://messyui.dev/r/animated-counter.json

Prop	Type	Default	Description
target	number	`1234`	The target number to count to
duration	number	`2`	Animation duration in seconds
prefix	string	`""`	Text before the number
suffix	string	`"+"`	Text after the number