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.

<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:

<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):

{
    // 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

<script src="https://cdn.jsdelivr.net/npm/alpinejs-autoanimate@latest/dist/autoanimate.cdn.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

NPM/Yarn

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

Then you can register the plugin.

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

Stats