An Alpine.js wrapper for @formkit/auto-animate.
npm install @marcreichel/alpine-auto-animate
An Alpine.js wrapper for @formkit/auto-animate.
Include the following tag in the of your document, just before Alpine.
``html`
`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();
`
Add the x-auto-animate directive to any element where you want to apply animations (including their direct children).
`html`
To adjust the animation duration add a modifier like so:
`html`
or
`html`
To adjust the easing function add it as a modifier:
`html`
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`
If you are using the npm installation method for this package or the ESM distribution, you can use theAutoAnimate.configure method to provide a configuration:
`javascript
import AutoAnimate from '@marcreichel/alpine-auto-animate';
Alpine.plugin(AutoAnimate.configure({
duration: 1000,
easing: 'linear',
disrespectUserMotionPreference: true,
}));
``
Copyright (c) 2022 Marc Reichel and contributors.
Licensed under the MIT license, see LICENSE for details.