# alpinejs-autoanimate

> Minimal AlpineJS wrapper for @formkit/auto-animate

Latest version **1.2.0** (published 2023-11-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install alpinejs-autoanimate
pnpm add alpinejs-autoanimate
yarn add alpinejs-autoanimate
bun add alpinejs-autoanimate
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-11-10 |
| First published | 2022-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Stefan Racic |
| Maintainers | stefanracic |
| Keywords | Alpine, AlpineJS, Auto Animate, auto-animate, Alpine Animations, Alpine Auto Animate, Alpine autoAnimate, Alpine auto-animate |

## Links

- npm: https://www.npmjs.com/package/alpinejs-autoanimate
- Repository: https://github.com/racha/alpinejs-autoanimate
- Homepage: https://github.com/racha/alpinejs-autoanimate#readme
- Issues: https://github.com/racha/alpinejs-autoanimate/issues
- npm.io page: https://npm.io/package/alpinejs-autoanimate

## 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) — 2023-11-10
- 1.1.0 — 2022-12-07
- 1.0.12 — 2022-09-12
- 1.0.11 — 2022-07-28
- 1.0.10-a — 2022-07-28
- 1.0.10 — 2022-07-28
- 1.0.7 — 2022-07-28

## README

# Alpine JS `x-autoanimate`

Alpine JS plugin `x-autoanimate` allows you to use [FormKit AutoAnimate](https://auto-animate.formkit.com/) with [AlpineJS](https://alpinejs.dev/)

## Example

Example how to use `x-autoanimate`. For animations to work correctly you **MUST** use unique `:key`.

```html
<div x-data="{items: [1, 2, 3]}">
  <div x-autoanimate>
    <template x-for="(item, index) in items" :key="`${item}`">
      <div x-text="item" @click="items.splice(index, 1)"></div>
    </template>
  </div>
  <div @click="items.push(Math.floor((Math.random()*1000 + 1)))">Add Item</div>
</div>
```

You can pass settings object to `x-autoanimate` like this:

```html
<div x-data="{items: [1, 2, 3]}">
  <div x-autoanimate="{duration: 500, easing:'ease-in-out'}">
    <template x-for="(item, index) in items" :key="`${item}`">
      <div x-text="item" @click="items.splice(index, 1)"></div>
    </template>
  </div>
  <div @click="items.push(Math.floor((Math.random()*1000 + 1)))">Add Item</div>
</div>
```

Default settings are (if not provided):

```js
{
    // Animation duration in milliseconds (default: 250)
  duration: 250,
  // Easing for motion (default: 'ease-in-out')
  easing: 'ease-in-out',
  // When true, this will enable animations even if the user has indicated
  // they don’t want them via prefers-reduced-motion.
  disrespectUserMotionPreference: false
}
```

## Install

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/alpinejs-autoanimate@latest/dist/autoanimate.cdn.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

### NPM/Yarn

```shell
npm i -D alpinejs-autoanimate
or
yarn add -D alpinejs-autoanimate
```

Then you can register the plugin.

```js
import Alpine from "alpinejs";
import autoanimate from "alpinejs-autoanimate";
Alpine.plugin(autoanimate);
window.Alpine = Alpine;
Alpine.start();
```

### Stats

[![](https://data.jsdelivr.com/v1/package/npm/alpinejs-autoanimate/badge)](https://www.jsdelivr.com/package/npm/alpinejs-autoanimate)
![](https://img.shields.io/bundlephobia/min/alpinejs-autoanimate)
![](https://img.shields.io/npm/v/alpinejs-autoanimate)
![](https://img.shields.io/npm/dt/alpinejs-autoanimate)
![](https://img.shields.io/github/license/racha/alpinejs-autoanimate)

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