Docs
→Basic Number Ticker
Basic Number Ticker
A component that animates a number from one value to another.
0%
Source code
Copy and paste the following code into your project:
Examples
Controlling the animation from outside the component
To start the animation from outside the component, you can use the startAnimation function that is exposed via the ref. In this example, the animation (re)start when the component enters the viewport.
Revenue
$0
Conversion Rate
0%
Bounce Rate
100%
Avg. Session Duration
0s
New Users
0
Active Users
0
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| from* | number | 0 | Starting value of the animation |
| target* | number | 100 | End value of the animation |
| transition | ValueAnimationTransition | { duration: 3, type: "tween", ease: "easeInOut" } | Animation configuration, refer to framer-motion docs for more details |
| className | string | undefined | Additional CSS classes for styling |
| onStart | () => void | undefined | Callback function when animation starts |
| onComplete | () => void | undefined | Callback function when animation completes |
| autoStart | boolean | true | Whether to start the animation automatically |