Count Animation

A component that animates counting up/down to a target number.

100

Import the countanimation action and use it on any element containing a number.

import { countanimation } from '$lib/components/ori/count-animation';

<div use:countanimation>0</div>

if you want to customize the animation, pass an object with the desired properties:

<div use:countanimation={{ from: 50, to: 200, delay: 1, duration: 3, ease: 'easeInOut' }}>50</div>

Prop	Type	Default	Description
from	number	0	The number to start counting from.
to	number	100	The target number to count to.
delay	number	0	Delay in seconds before the animation starts.
duration	number	0	Duration in seconds for the counting animation.
ease	string	‘linear’	Easing function for the animation (e.g., ‘linear’, ‘easeIn’, ‘easeOut’, ‘easeInOut’).

Consult motion.dev for more options.