Use Animate.css Animations As Components – Shoelace Animations

Shoelace Animations is a JavaScript library that exacts animations from Animate.css library and allows you to use them as ES modules.

How to use it:

1. Install & download.

# NPM
$ npm i @shoelace-style/animations

2. Import animations as modules as follows:

// Import all animations
import * as animations from '@shoelace-style/animations';
// Import specific animations
// Refer to https://animate.style for a complete list
import { bounce, flip, ... } from '@shoelace-style/animations';

3. Apply an animation of your choice to an element.

const myAnimation = document.querySelector('#example');
myAnimation.animate(bounce, {
  // options here
});

4. Config the duration of the animation.

myAnimation.animate(bounce, {
  duration: 3000
});

5. Apply an easing function:

myAnimation.animate(bounce, {
  easing: 'linear'
});

6. Determine whether or not to loop the animation.

const myAnimation = document.querySelector('#example');
myAnimation.animate(bounce, {
  iterations: Infinity
});