# @shoelace-style/animations

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

Latest version **1.2.0** (published 2024-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shoelace-style/animations
pnpm add @shoelace-style/animations
yarn add @shoelace-style/animations
bun add @shoelace-style/animations
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-08-26 |
| First published | 2020-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cory LaViska |
| Maintainers | supercodepoet, claviska |
| Keywords | animation, web animations api, animate.css |

## Links

- npm: https://www.npmjs.com/package/@shoelace-style/animations
- Repository: https://github.com/shoelace-style/animations
- Issues: https://github.com/shoelace-style/animations/issues
- Funding: https://github.com/sponsors/claviska
- npm.io page: https://npm.io/package/@shoelace-style/animations

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2024-08-26
- 1.1.0 — 2021-02-18
- 1.0.0 — 2020-12-29

## 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
<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](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).

---
_Source: https://npm.io/package/@shoelace-style/animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._