animate.css - zorroe

Installation#

Via npm

npm install animate.css --save
Via yarn

yarn add animate.css

Import

import 'animate.css';
Or directly import the CSS file

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

Basic Usage#

<h1 class="animate__animated animate__bounce">An animated element</h1>

Trigger Animation on Click using JavaScript#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <div style="width: 100%; display: flex; justify-content: center">
      <h1 id="animated">An animated element</h1>
    </div>
  </body>

  <script>
    const animateCSS = (element, animation, prefix = "animate__") => {
      // We create a Promise and return it
      new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);

        node.classList.add(`${prefix}animated`, animationName);

        // When the animation ends, we clean the classes and resolve the Promise
        function handleAnimationEnd(event) {
          event.stopPropagation();
          node.classList.remove(`${prefix}animated`, animationName);
          resolve("Animation ended");
        }
        node.addEventListener("animationend", handleAnimationEnd, {
          once: true,
        });
      });
    };

    document.getElementById("animated").addEventListener("click", () => {
      animateCSS("#animated", "bounce");
    });
  </script>
</html>