💫 Alpine AutoAnimate 💫

An Alpine.js wrapper for @formkit/auto-animate.

🚀 Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-auto-animate@latest/dist/alpine-auto-animate.min.js" defer></script>

NPM

npm install @marcreichel/alpine-auto-animate

Add the x-auto-animate directive to your project by importing the package before starting Alpine.

import Alpine from 'alpinejs';
import AutoAnimate from '@marcreichel/alpine-auto-animate';

Alpine.plugin(AutoAnimate);

Alpine.start();

🪄 Usage

Add the x-auto-animate directive to any element where you want to apply animations (including their direct children).

<ul x-auto-animate>
    <li>Lorem</li>
    <li>Ipsum</li>
</ul>

Duration

To adjust the animation duration add a modifier like so:

<ul x-auto-animate.1000ms>
    <!-- ... -->
</ul>

<ul x-auto-animate.1s>
    <!-- ... -->
</ul>

Easing function

To adjust the easing function add it as a modifier:

<ul x-auto-animate.linear>
    <!-- ... -->
</ul>

Toggle animations

In some situations it may be necessary to disable animations and re-enable them later.

For this you can provide a boolean to the directive like so:

<div x-data="{ enabled: true }">
    <ul x-auto-animate="enabled">
        <!-- ... -->
    </ul>
    <button @click="enabled = !enabled" type="button">
        Toggle animations
    </button>
</div>

Global config

If you are using the npm installation method for this package or the ESM distribution, you can use the AutoAnimate.configure method to provide a configuration:

import AutoAnimate from '@marcreichel/alpine-auto-animate';

Alpine.plugin(AutoAnimate.configure({
    duration: 1000,
    easing: 'linear',
    disrespectUserMotionPreference: true,
}));

📄 License

Licensed under the MIT license, see LICENSE for details.