Alpine JS x-autoanimate

Alpine JS plugin x-autoanimate allows you to use FormKit AutoAnimate with AlpineJS

Example

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

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

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

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

Default settings are (if not provided):

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

Install

CDN

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

NPM/Yarn

1npm i -D alpinejs-autoanimate
2or
3yarn add -D alpinejs-autoanimate

Then you can register the plugin.

1import Alpine from "alpinejs";
2import autoanimate from "alpinejs-autoanimate";
3Alpine.plugin(autoanimate);
4window.Alpine = Alpine;
5Alpine.start();

Stats