https://github.com/shoelace-style/animations

Your favorite animate.css effects available as ES modules for use with the Web Animations API.
https://github.com/shoelace-style/animations

animation webanimationsapi

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/shoelace-style/animations
• Owner: shoelace-style
• License: mit
• Created: 2020-12-29T19:55:10.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-26T20:34:22.000Z (5 months ago)
• Last Synced: 2024-12-30T19:14:25.558Z (11 days ago)
• Topics: animation, webanimationsapi
• Language: JavaScript
• Homepage:
• Size: 19.5 KB
• Stars: 36
• Watchers: 5
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Shoelace Animations

Your favorite [animate.css](https://animate.style/) effects available as ES modules for use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).

- 🏆 ~100 quality animations

- 🎾 ~30 popular easings

- 🚚 Works with CDNs

- 🌲 Fully tree-shakeable

[Try it on JSFiddle](https://jsfiddle.net/claviska/ohjmkgb1)

This module was built for [Shoelace](https://shoelace.style/), 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



  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

  });

```

This example uses the [jsDelivr CDN](https://www.jsdelivr.com/). 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) that you can use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/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](https://github.com/shoelace-style/animations/issues).