💫
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>
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.
18 Nov 16, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Oct 12, 2021
47 Dec 22, 2022
10 Aug 29, 2022
102 Nov 14, 2022