Shoelace Animations

Your favorite animate.css effects available as ES modules for use with the Web Animations API.

by claviska

HTML

<div class="box"></div>

CSS

body {
  padding: 2rem;
}

div {
  display: block; 
  width: 100px; 
  height: 100px; 
  background: tomato;
}

JavaScript

// Important! If using in a script tag, use <script type="module">
import * as animations from 'https://cdn.jsdelivr.net/npm/@shoelace-style/animations@1/dist/index.js';

const box = document.querySelector('.box');

// All animations from animate.css are supported
//
// e.g. bounce, flash, shakeX, shakeY, flip, jackInTheBox
//
// Refer to https://animate.style for a complete list
//
box.animate(animations.flip, {
  duration: 1500,
  iterations: Infinity,
  easing: 'linear'
});