Shoelace Animations

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

🏆 ~100 quality animations
🎾 ~30 popular easings
🚚 Works with CDNs
🌲 Fully tree-shakeable

This module was built for Shoelace, but it works well as a stand-alone library too!

Installation

npm install @shoelace-style/animations

Usage

Importing all animations:

import * as animations from '@shoelace-style/animations';

Importing individual animations:

import { bounce } from '@shoelace-style/animations';

Importing easings:

import { easings } from '@shoelace-style/animations';

Animating an element:

<div style="display: block; width: 100px; height: 100px; background: tomato; margin: 2rem;"></div>

<script type="module">
  import { easings, flip } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/animations@1/dist/index.js';

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

  box.animate(flip, {
    duration: 1500,
    iterations: Infinity,
    easing: easings.easeInSine
  });
</script>

This example uses the jsDelivr CDN. To import the library locally, install it and make node_modules/@shoelace-style/animations/dist available to your app or bundler.

Developers

This script parses all animation stylesheets found in node_modules/animate.css and generates keyframe objects that you can use with the Web Animations API. As animations are tweaked and added to animate.css, the keyframes herein will be kept in sync when rerunning the script.

To build the project, run:

npm run build

This will purge and rebuild the dist directory.

Please report all bugs and suggestions to the issue tracker.