Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoof123/nuxt-animate.css
nuxt module to integrate animate.css library with intersection observer api to optionally trigger animations on scroll.
https://github.com/hoof123/nuxt-animate.css
animate animate-css animation nuxt nuxt-module nuxt3 nuxtjs vue vue3
Last synced: about 18 hours ago
JSON representation
nuxt module to integrate animate.css library with intersection observer api to optionally trigger animations on scroll.
- Host: GitHub
- URL: https://github.com/hoof123/nuxt-animate.css
- Owner: hoof123
- Created: 2022-12-13T22:46:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-31T20:31:10.000Z (over 1 year ago)
- Last Synced: 2024-09-18T17:45:05.607Z (9 days ago)
- Topics: animate, animate-css, animation, nuxt, nuxt-module, nuxt3, nuxtjs, vue, vue3
- Language: Vue
- Homepage:
- Size: 79.1 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nuxt animate.css
this nuxt module is an integration of css animation library [animate.css](https://animate.style/) paired with [javascript's intersection observer api](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to optionally trigger animations on scroll.
credit for animate.css goes to Daniel Eden, Elton Mesquita, and Waren Gonzaga. animate.css is licensed under the [hippocratic license](https://firstdonoharm.dev/).
### features
- 🚀 nuxt 3 support
- open source
- full typescript support
- ✨ auto import modules & styles
- ✨ works out of the box
---
## installation
to add this module to your Nuxt.js project, run the following command:
`npm i @jpcreativemedia/nuxt-animate.css`
then, add nuxt-swipe to the modules section of your nuxt.config.js file:
```
export default {
modules: [
'@jpcreativemedia/nuxt-animate.css'
]
}
```
## usage
### basic usage
to use the module, simply add component in your vue file. wrap the component tags around any children that you wish to animate.
for example:
```
Hello World!
```
the component requires **5** props: **animation**, **delay**, **duration**, **repeat**, **:scroll**. you can leave the prop values empty, but they must be present to adhere with typescript.
**animation** corresponds with animate.css' basic animation classes and is where you choose what [animation](#animations) you wish to use.
```
Hello World!
```
**delay**, **duration**, **repeat** are [utility classes](#utility-classes).
```
Hello World!
```
**:scroll** is a boolean that enables the intersection observer api so you can choose to trigger the animation as the child element is scrolled into view.
note: **:scroll** must be assigned dynamically with the vue directive **v-bind:** or its **:** shortcut.
example:
```
Hello World!
```
or
```
Hello World!
```
---
### animations
| **attention seekers** |
| :------------- |
| animate__bounce |
| animate__flash |
| animate__pulse |
| animate__rubberBand |
| animate__shakeX |
| animate__shakeY |
| animate__headShake |
| animate__swing |
| animate__tada |
| animate__wobble |
| animate__jello |
| animate__heartBeat |
| **back entrances** | **back exits** |
| :------------- | :------------- |
| animate__backInDown | animate__backOutDown |
| animate__backInLeft | animate__backOutLeft |
| animate__backInRight | animate__backOutRight |
| animate__backInUp | animate__backOutUp |
| **bouncing entrances** | **bouncing exits** |
| :------------- | :------------- |
| animate__bounceIn | animate__bounceOut |
| animate__bounceInDown | animate__bounceOutDown |
| animate__bounceInLeft | animate__bounceOutLeft |
| animate__bounceInRight | animate__bounceOutRight |
| animate__bounceInUp | animate__bounceOutUp |
| **fading entrances** | **fading exits** |
| :------------- | :------------- |
| animate__fadeIn | animate__fadeOut |
| animate__fadeInDown | animate__fadeOutDown |
| animate__fadeInDownBig | animate__fadeOutDownBig |
| animate__fadeInLeft | animate__fadeOutLeft |
| animate__fadeInLeftBig | animate__fadeOutLeftBig |
| animate__fadeInRight | animate__fadeOutRight |
| animate__fadeInRightBig | animate__fadeOutRightBig |
| animate__fadeInUp | animate__fadeOutUp |
| animate__fadeInUpBig | animate__fadeOutBig |
| animate__fadeInTopLeft | animate__fadeOutTopLeft |
| animate__fadeInTopRight | animate__fadeOutTopRight |
| animate__fadeInBottomLeft | animate__fadeOutBottomRight |
| animate__fadeInBottomRight | animate__fadeOutBottomLeft |
| **flippers** |
| :------------- |
| animate__flip |
| animate__flipInX |
| animate__flipInY |
| animate__flipOutX |
| animate__flipOutY |
| **lightspeed** |
| :------------- |
| animate__lightSpeedInRight |
| animate__lightSpeedInLeft |
| animate__lightSpeedOutRight |
| animate__lightSpeedOutLeft |
| **rotating entrances** | **rotating exits** |
| :------------- | :------------- |
| animate__rotateIn | animate__rotateOut |
| animate__rotateInDown | animate__rotateOutDown |
| animate__rotateInLeft | animate__rotateOutLeft |
| animate__rotateInRight | animate__rotateOutRight |
| animate__rotateInUp | animate__rotateOutUp |
| **specials** |
| :------------- |
| animate__hinge |
| animate__jackInTheBox |
| animate__rollIn |
| animate__rollOut |
| **zooming entrances** | **zooming exits** |
| :------------- | :------------- |
| animate__zoomIn | animate__zoomOut |
| animate__zoomInDown | animate__zoomOutDown |
| animate__zoomInLeft | animate__zoomOutLeft |
| animate__zoomInRight | animate__zoomOutRight |
| animate__zoomInUp | animate__zoomOutUp |
| **sliding entrances** | **sliding exits** |
| :------------- | :------------- |
| animate__slideInDown | animate__slideOutDown |
| animate__slideInLeft | animate__slideOutLeft |
| animate__slideInRight | animate__slideOutRight |
| animate__slideInUp | animate__slideOutUp |
---
### utility classes
animate.css has a few utility classes to simplify its use.
#### delay classes
you can add delays with these **delay** prop values:
| class | default delay time |
| :------------- | :------------- |
| animate__delay-2s | 2s |
| animate__delay-3s | 3s |
| animate__delay-4s | 4s |
| animate__delay-5s | 5s |
#### duration classes
you can control the speed of the animation with these **duration** prop values:
| class | default speed time |
| :------------- | :------------- |
| animate__slow | 2s |
| animate__slower | 3s |
| animate__fast | 800ms |
| animate__faster | 500ms |
#### repeat classes
you can control the iteration count of the animation with these **repeat** prop values:
| class | default iteration count |
| :------------- | :------------- |
| animate__repeat-1 | 1 |
| animate__repeat-2 | 2 |
| animate__repeat-3 | 3 |
| animate__infinite | infinite |
## examples
fadeIn animation with no delay, default duration, 1 iteration, no scroll.
```
Hello World!
```
bounce animation with no delay, fast duration, 3 iterations, triggered on scroll.
```
Hello World!
```
slideOutRight animation with a 1 second delay, slow duration, 1 iteration, triggered on scroll.
```
Hello World!
```
zoomIn animation with a 2 second delay, faster duration, 1 iteration, triggered on scroll.
```
Hello World!
```
## demo
coming soon
## best practices
for some advice on animation best practices, you should read the following:
[animate.css best practices](https://animate.style/#best-practices)
### accessibility
animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. on supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.
## roadmap
- global animation options
- custom animation support
- intersection observer api options
## development
for further development, clone this repository and:
- run `npm run dev:prepare` to generate type stubs.
- use `npm run dev` to start [playground](./playground) in development mode.
the nuxt module development guide can be found here: [Nuxt Module Author Guide](https://nuxt.com/docs/guide/going-further/modules)
## license
[MIT](https://choosealicense.com/licenses/mit/)