nuxt animate.css

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.

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:

<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>

---

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.

<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>

demo

coming soon

best practices

for some advice on animation best practices, you should read the following:

animate.css 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 in development mode.

the nuxt module development guide can be found here: Nuxt Module Author Guide

license

MIT