💫 Alpine AutoAnimate 💫

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

🚀 Installation

$3

Include the following
`

$3

`shell
npm install @marcreichel/alpine-auto-animate
`

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

`js
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).

`html


• Lorem


• Ipsum


`

$3

To adjust the animation duration add a modifier like so:

`html







`

or

`html







`

$3

To adjust the easing function add it as a modifier:

`html







`

$3

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:

`html



`

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:

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

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

📄 License

Copyright (c) 2022 Marc Reichel and contributors.

Licensed under the MIT license, see LICENSE for details.