Animated number counter supporting formatting and decimals.
Every prop is wired to the controls underneath. The count starts once the number scrolls into view and replays when a control changes.
| Prop | Type | Default | Description |
|---|---|---|---|
to | number | - | The target number to count up to. |
from | number | 0 | The initial number from which the count starts. |
direction | string | "up" | Direction of the count; can be "up" or "down". When this is set to "down", "from" and "to" become reversed, in order to count down. |
delay | number | 0 | Delay in seconds before the counting starts. |
duration | number | 2 | Duration of the count animation, based on the damping and stiffness configured inside the component. |
startWhen | boolean | true | Controls whether the animation should start when the component is in view. If this is true, the count will start. |
separator | string | "" | Character to use as a thousands separator in the displayed number. |
start | event | - | Emitted when the count animation starts. |
end | event | - | Emitted when the count animation ends. |
Keyboard shortcuts and ARIA behavior.