this nuxt module is an integration of css animation library animate.css paired with javascript's 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.
- 🚀 nuxt 3 support
- open source
- full typescript support
- ✨ auto import modules & styles
- ✨ works out of the box
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'
]
}
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:
<template>
<Animate>
<p>Hello World!</p>
</Animate>
</template>
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 you wish to use.
<template>
<Animate animation="animate__bounce">
<p>Hello World!</p>
</Animate>
</template>
delay, duration, repeat are utility classes.
<template>
<Animate animation="animate__bounce" delay="" duration="" repeat="">
<p>Hello World!</p>
</Animate>
</template>
: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:
<template>
<Animate v-bind:scroll="true">
<p>Hello World!</p>
</Animate>
</template>
or
<template>
<Animate :scroll="true">
<p>Hello World!</p>
</Animate>
</template>
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 |
animate.css has a few utility classes to simplify its use.
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 |
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 |
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 |
fadeIn animation with no delay, default duration, 1 iteration, no scroll.
<template>
<Animate animation="animate__fadeIn" delay="" duration="" repeat="" :scroll="false">
<p>Hello World!</p>
</Animate>
</template>
bounce animation with no delay, fast duration, 3 iterations, triggered on scroll.
<template>
<Animate animation="animate__bounce" delay="" duration="animate__fast" repeat="animate__repeat-3" :scroll="true">
<p>Hello World!</p>
</Animate>
</template>
slideOutRight animation with a 1 second delay, slow duration, 1 iteration, triggered on scroll.
<template>
<Animate animation="animate__slideOutRight" delay="animate__delay-1s" duration="animate__slow" repeat="" :scroll="true">
<p>Hello World!</p>
</Animate>
</template>
zoomIn animation with a 2 second delay, faster duration, 1 iteration, triggered on scroll.
<template>
<Animate animation="animate__zoomIn" delay="animate__delay-2s" duration="animate__faster" repeat="" :scroll="true">
<p>Hello World!</p>
</Animate>
</template>
coming soon
for some advice on animation best practices, you should read the following:
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.
- global animation options
- custom animation support
- intersection observer api options
for further development, clone this repository and:
- run
npm run dev:prepare
to generate type stubs. - use
npm run dev
to start playground in development mode.
the nuxt module development guide can be found here: Nuxt Module Author Guide