Hooks to leverage the web-animations API
npm install use-web-animationuseWebAnimation which allows you to manipulate stylistic properties.
js
import { useWebAnimation } from 'use-web-animation';
const RotatingAnimation = () => {
const [ref] = useWebAnimation({
from: 0,
to: 180,
property: "transform",
infinite: true,
getValue: (x) => rotate(${x}deg)
});
return (
ref={ref}
style={{
backgroundColor: "red",
width: 100,
height: 100,
}}
/>
);
};
`
The second returned argument is a play function which can be used to imperatively
start playing a paused animation. This function also accepts an onComplete callback
which will be called when the animation completes.
Accepted properties:
`ts
type AnimationOptions = {
duration?: number; // How long the animation should take
infinite?: boolean; // Should the animation keep looping?
pause?: boolean; // Start the animation out in a non-playing state
delay?: number; // Delay before starting to animate
easing?: string; // https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing
from: number; // The starting value
to: number; // The ending value
getValue: (x: number) => string; // Function used to inject the value for "from" and "to"
property: string; // The property name
};
``