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

Try it on JSFiddle

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

Installation

``bash
npm install @shoelace-style/animations
`

Usage

Importing all animations:

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

Importing individual animations:

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

Importing easings:

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

Animating an element:

`html



`

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:

`bash
npm run build
`

This will purge and rebuild the dist` directory.

Please report all bugs and suggestions to the issue tracker.