💫 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>
or
<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
Copyright (c) 2022 Marc Reichel and contributors.
Licensed under the MIT license, see LICENSE for details.
