Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcreichel/alpine-auto-animate
Alpine.js wrapper for @formkit/auto-animate.
https://github.com/marcreichel/alpine-auto-animate
alpinejs alpinejs-plugin animation auto-animate formkit hacktoberfest transition transitions transitions-library
Last synced: 3 days ago
JSON representation
Alpine.js wrapper for @formkit/auto-animate.
- Host: GitHub
- URL: https://github.com/marcreichel/alpine-auto-animate
- Owner: marcreichel
- License: mit
- Created: 2022-09-18T18:17:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-29T14:08:27.000Z (8 months ago)
- Last Synced: 2024-10-11T12:11:37.700Z (3 months ago)
- Topics: alpinejs, alpinejs-plugin, animation, auto-animate, formkit, hacktoberfest, transition, transitions, transitions-library
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 102
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate
README
💫 Alpine AutoAnimate 💫
An Alpine.js wrapper for @formkit/auto-animate.
## 🚀 Installation
### CDN
Include the following `` tag in the `<head>` of your document, just before Alpine.
```html
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-auto-animate@latest/dist/alpine-auto-animate.min.js" defer>
```
### NPM
```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
```
### Duration
To adjust the animation duration add a modifier like so:
```html
```
or
```html
```
### Easing function
To adjust the easing function add it as a modifier:
```html
```
### 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:
```html
Toggle animations
```
## 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](LICENSE) for details.