motion-counter
Animates a number from one value to another using spring physics when it enters the viewport. Great for stats, scores, and dashboards.
Preview
Import
Usage
How it works
The counter watches the viewport via IntersectionObserver. When 20% of the element is visible, it animates the number from from to to using a spring. By default (once), it only fires once and disconnects the observer.
Prefix & suffix
Attach static text before or after the number — useful for currency symbols, units, and percentages.
Decimals
Control how many decimal places are displayed. The spring animates through fractional values so the decimal digits flow naturally.
Repeat on re-entry
Set once="false" to re-animate every time the element re-enters the viewport.
Methods
| Method | Description |
|---|---|
replay() | Restart the animation from from immediately, regardless of viewport state. |
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 0 | Starting value |
| | | number | 100 | End value |
| | | number | 1.5 | Spring duration hint in seconds |
| | | number | 0 | Number of decimal places to display |
| | | string | '' | Static text prepended to the number |
| | | string | '' | Static text appended to the number |
| | | boolean | true | Animate only on first intersection. Set to false to replay on every re-entry. |
Accessibility
When prefers-reduced-motion is set, the counter jumps instantly to its final value with no animation.