Animate On Scroll With Animate.css

Install & Download:

# Yarn
$ yarn add vue-animate-onscroll
# NPM
$ npm install vue-animate-onscroll --save

Description:

This is a Vue.js directive used to animate elements on scroll using Animate.css animations.

How to use it:

1. Install, import and register the directive.

import VueAnimateOnScroll from 'vue-animate-onscroll'
Vue.use(VueAnimateOnScroll)

2. Load the latest Animate.css library in the document.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@latest/animate.min.css" />

3. Animate an element when it is scrolled into view.

<div v-animate-onscroll="'animated flash'">
  Animate me
</div>

4. Determine whether to repeat the animation.

<div v-animate-onscroll.repeat="'animated flash'">
  Animate me
</div>

5. Determine the animations depending on the scroll direction.

<div v-animate-onscroll="{down: 'animated flash', up: 'animated rotateOut' }">
  Animate me
</div>

6. Specify in and out animations.

<div v-animate-onscroll.repeat="{in: 'animated flipInX', out: 'animated flipOutX'}" data-animate-onscroll-offset="100">
  Animate me upon scroll forever
</div>

Preview:

Changelog:

07/21/2022

• Add in- and out-animation support on scroll