Docs
→Text
→Basic Number Ticker
Basic Number Ticker
A component that animates a number from one value to another.
Loading...
Installation
1pnpm dlx shadcn add @fancy/basic-number-ticker
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.
Loading...
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 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 |