Number Ticker
Animate numbers to count up or down to a target number
API
Prop Name | Type | Default | Description |
---|---|---|---|
value | int | 0 | Value to count to |
direction | up | down | up | Direction to count in |
decimalPlaces | number | 0 | Number of decimal places to show |
delay | number | 0 | Delay before counting (in milliseconds) |
duration | number | 1000 | Total duration for the entire animation (in milliseconds). |
transition | TransitionPresets | easeOutCubic | Name of transition preset (https://vueuse.org/core/useTransition) |
Component Code
You can copy and paste the following code to create this component:
NumberTicker.vue
Credits
- Credits to Grzegorz Krol for porting this component.
- Ported from Magic UI NumberTicker.