React Hooks To Create Web Animations Using Mozilla Web Animations API

Category: React React Animation | July 28, 2021
Author: JoviDeCroock
Official Page: Go to website
Last Update: July 28, 2021
License: MIT

react web animation api

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:

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. 🙂