Hooks To Leverage The Web Animations API

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 = useState();
const = useWebAnimation({
from: 0,
to: 100,
property: “opacity”,
getValue: (x) => `${x}%`,
duration: 333
});
const = useWebAnimation({
from: 0.5,
to: 1,
property: “transform”,
getValue: (x) => `scale(${x})`,
duration: 333
});
const = useWebAnimation({
from: hovering ? 1.2 : 1,
to: hovering ? 1 : 1.2,
property: “transform”,
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
const = useWebAnimation({
from: hovering ? 1.2 : 1,
to: 0.8,
property: “transform”,
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
const = useWebAnimation({
from: 0.8,
to: 1.2,
property: “transform”,
getValue: (x) => `scale(${x})`,
pause: true,
duration: 333
});
return (
{
transformRef.current = opacityRef.current = clickRef.current = reverseClickRef.current = hoverRef.current