Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdelhamiderrahmouni/alpinejs-animate
An Alpine.js plugin to animate your website.
https://github.com/abdelhamiderrahmouni/alpinejs-animate
Last synced: 6 days ago
JSON representation
An Alpine.js plugin to animate your website.
- Host: GitHub
- URL: https://github.com/abdelhamiderrahmouni/alpinejs-animate
- Owner: abdelhamiderrahmouni
- Created: 2024-07-18T13:16:38.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T17:40:18.000Z (5 months ago)
- Last Synced: 2024-12-10T16:29:39.156Z (28 days ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Alpinejs Animate
This package provides a simple way to animate elements using Alpine.js and Animate.css.
## Requirements
- [Alpine.js](https://alpinejs.dev)
- [Animate.css](https://animate.style)
## Installation
```bash
npm install alpinejs-animate
```
### Importing
You can import the package in your JavaScript file:
```js
import Animate from 'alpinejs-animate';
Alpine.plugin(Animate);
Alpine.start();
```
Note: Animate can be changed to any name you prefer.
```js
import AlpineAnimate from 'alpinejs-animate';
Alpine.plugin(AlpineAnimate);
Alpine.start();
```
## Basic Usage
```html
Content to animate
```
Replace `animationName` with any valid Animate.css animation name (e.g., "fadeIn", "bounceOut", etc.).
## Modifiers
### Intersection Observer
- `.intersect`: Triggers the animation when the element enters the viewport.
```html
Animate when in viewport
```
### Delay
- `.delay.[milliseconds]`: Adds a delay before the animation starts.
```html
Animate after 500ms delay
```
### Repeat
- `.repeat.[count]`: Repeats the animation a specified number of times.
- `.repeat.infinite`: Repeats the animation indefinitely.
```html
Animate 3 times
```
### Interval
- `.interval.[milliseconds]`: Sets the interval between repeated animations.
- `.repeat.[count].[interval]`: Repeats the animation a specified number of times.
```html
Animate 3 times with 1 second interval
```
or
```html
Animate 3 times with 100ms interval
```
### Duration
- `.duration.[milliseconds]`: Sets the duration of each animation.
```html
Fade in over 2 seconds
```
### Intersection Threshold
- `.threshold.[value]`: Sets the intersection threshold (0-100).
- `.half`: Sets the intersection threshold to 50%.
- `.full`: Sets the intersection threshold to 99%.
```html
Animate when 75% visible
```
## Combining Modifiers
You can combine multiple modifiers to create complex animation behaviors:
```html
Complex animation example
```
This will:
1. Trigger when the element intersects the viewport
2. Wait 100ms before starting
3. Repeat the animation 3 times
4. Wait 500ms between each repetition
5. Each animation lasts 1000ms
## Advanced Usage Examples
```html
Content to animate with 100ms delay on intersection, repeating 3 times every 100ms, animation duration 500ms
Content to animate on intersection without delay, repeating infinitely every 500ms, animation duration 800ms
Content to animate with 100ms delay immediately, repeating 2 times every 200ms, animation duration 600ms
Content to animate without delay immediately, animation duration 400ms
```
## Notes
- The directive automatically adds the `animate__animated` class and prefixes your animation name with `animate__`.
- Elements are initially hidden with the `invisible` class and revealed when the animation starts.
- When using `.intersect`, the animation only triggers once when the element enters the viewport.
Remember to include the Animate.css library in your project for the animations to work.
### Example of including Animate.css in your project
#### Using a CDN
```html
```
#### Using npm
```bash
npm install animate.css
```
and then import it in your JavaScript file:
```js
import 'animate.css';
```
or in your CSS file:
```css
@import 'animate.css';
```
## License
This package is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
## Credits
This package is heavily inspired by the following projects:
- [Alpinejs Intersect Class](https://github.com/heidkaemper/alpinejs-intersect-class)
- [Alpine Intersect Animate](https://github.com/s-patompong/alpine-intersect-animate)
And uses the following libraries:
- [Alpine.js](https://alpinejs.dev)
- [Animate.css](https://animate.style)
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
Would you like me to explain or clarify any part of this documentation further?