npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jpcreativemedia/nuxt-animate.css

v1.0.6

Published

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

Downloads

31

Readme

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