@jpcreativemedia/nuxt-animate.css

v1.0.6

Published

2 years ago

nuxt module to integrate animate.css library with intersection observer api to optionally trigger animations on scroll.

Downloads

0High
0Medium
0Low

hoof123

animation animate animate.css nuxt nuxt3 nuxt-module vue3 vue nuxt

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>

<template>
    <Animate :scroll="true">
        <p>Hello World!</p>
    </Animate>
</template>

animations

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