Description:
React hooks that provide an API to use the Web Animations API.
How to use it:
1. Install and import the useWebAnimation.
import { useState } from "react";
import { useWebAnimation } from "use-web-animation";2. This example shows how to animate an element with various trigger events.
export default function App() {
const [hovering, setHovering] = useState();
const [opacityRef] = useWebAnimation({
from: 0,
to: 100,
property: "opacity",
getValue: (x) => `${x}%`,
duration: 333
});
const [transformRef] = useWebAnimation({
from: 0.5,
to: 1,
property: "transform",
getValue: (x) => `scale(${x})`,
duration: 333
});
const [hoverRef, hover] = useWebAnimation({
from: hovering ? 1.2 : 1,
to: hovering ? 1 : 1.2,
property: "transform",
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
const [clickRef, click] = useWebAnimation({
from: hovering ? 1.2 : 1,
to: 0.8,
property: "transform",
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
const [reverseClickRef, reverseClick] = useWebAnimation({
from: 0.8,
to: 1.2,
property: "transform",
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
return (
<div
ref={(x) => {
transformRef.current = opacityRef.current = clickRef.current = reverseClickRef.current = hoverRef.current = x;
}}
className="box"
onMouseOver={() => {
setHovering(true);
hover();
}}
onMouseOut={() => {
setHovering(false);
hover();
}}
onClick={() => {
click(reverseClick);
}}
/>
);
}3. Available props.
duration?: number; infinite?: boolean; pause?: boolean; delay?: number; easing?: string; from: number; to: number; getValue: (x: number) => string; property: string;
Preview:
