Counter & Countdown
Code
| 1 | // The animated value lives on a stable plain object; anime.js mutates it |
| 2 | // in place each frame and we write it to the DOM in onUpdate. |
| 3 | const target = useMemo(() => ({ val: from }), [from]); |
| 4 | |
| 5 | // Counter: tween val from current → `to`, round to integers. |
| 6 | const { controls } = useAnime({ |
| 7 | targets: target, |
| 8 | val: to, |
| 9 | duration, // counter: 2500; countdown: from * 1000 |
| 10 | round: 1, |
| 11 | ease: 'outExpo', // counter; countdown uses 'linear' |
| 12 | loop, // counter loops; countdown does not |
| 13 | autoplay, |
| 14 | onUpdate: () => writeValue(target.val), |
| 15 | }); |
Number tween (counter) and a duration-based countdown, both via useAnime object targets.
Live preview
Counter & CountdownSmooth number tweens
0
Props
| Name | Type | Default | Description |
|---|---|---|---|
| targets | object | - | Plain object holding the tweened value ({ val }) |
| val | number | - | Target value to tween to |
| round | number | 1 | Round to whole numbers each frame |
| duration | number | - | Counter ms; countdown = from × 1000 |
| ease | string | 'outExpo' | outExpo (counter) | linear (countdown) |
| loop | boolean | false | Loop (counter) or run once (countdown) |
| format | 'seconds'|'mm:ss'|'padded' | - | Display format |
| size | 'sm'|'md'|'lg' | 'md' | Font size |