Animation & Timing
useAnimation
A hook that creates an animation with duration, easing, delay, and loop options.
useAnimation
Deprecated: This hook is deprecated and will be removed in a future major version. Please migrate to useEasing for better control and features.
useAnimation is a hook that creates an animation with duration, easing, delay, and loop options.
Usage
import { useAnimation } from "rooks";
function App() {
const value = useAnimation({
duration: 1000,
loop: true,
});
return (
<div
style={{
width: 100,
height: 100,
background: "red",
transform: `rotate(${value * 360}deg)`,
}}
/>
);
}Delayed animation with custom easing
import { useAnimation } from "rooks";
function easeOutQuad(t) {
return 1 - (1 - t) * (1 - t);
}
function DelayedProgress() {
const progress = useAnimation({
duration: 1200,
delay: 300,
easing: easeOutQuad,
});
return (
<div>
<div>Progress: {(progress * 100).toFixed(0)}%</div>
<div
style={{
height: 8,
width: 240,
background: "#e5e7eb",
borderRadius: 999,
overflow: "hidden",
}}
>
<div
style={{
width: `${progress * 100}%`,
height: "100%",
background: "#2563eb",
}}
/>
</div>
</div>
);
}Arguments
| Argument | Type | Default | Description |
|---|---|---|---|
| options | AnimationOptions | - | Animation options. |
AnimationOptions
| Property | Type | Default | Description |
|---|---|---|---|
| duration | number | - | Duration of the animation in milliseconds. |
| easing | (t: number) => number | t => t | Easing function to use. |
| delay | number | 0 | Delay before starting the animation in milliseconds. |
| loop | boolean | false | Whether to loop the animation. |
Return Value
Returns the current value of the animation (0 to 1).