Contents
Description:
The Web Animations API enables your app to synchronize and timing changes to the presentation of a Web page for example animation of DOM elements.
use-web-animation hooks provides you the APIs to use web-animations API.
Please note that, this isn’t supported in IE11 without a polyfill, in IE11 this library will just execute the ending value.
You might also like:
Create Liquid Swipe Effect In Your React Project With LiquidSwipe ComponentCreate A Bird’s Eye View Parallax in ReactReact Horizontal Scroll View Component using react-native-steve
How to use it?
1. Download the component by clicking on ‘Download’ button above, and import into your project.
import “./style/index.css”;
import { render } from “preact”;
import { useState } from “preact/hooks”;
import { useWebAnimation } from “use-web-animation/preact”;
2. Code, that will show the animation on click event.
function Card() {
const [flipped, setFlipped] = useState(false);
const [ref, play] = useWebAnimation({
from: flipped ? 180 : 0,
to: flipped ? 0 : 180,
getValue: (v) => `rotateY(${v}deg)`,
property: “transform”,
// infinite: true,
pause: true // f you want to leverage the clicking
});
return (
<div
className=”scene”
onClick={() => {
play(() => setFlipped(!flipped));
}}
>
<div className=”card” ref={ref}>
<div className=”card__face card__face–front” />
<div className=”card__face card__face–back” />
</div>
</div>
);
}
render(<Card />, document.getElementById(“root”));
Thanks for reading.
The post React Hooks To Create Web Animations Using Mozilla Web Animations API appeared first on Lipku.com.