Animate On Scroll With Animate.css

Install & Download:

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


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'

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

<link rel="stylesheet" href="" />

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

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

4. Determine whether to repeat the animation.

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

5. Determine the animations depending on the scroll direction.

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

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


Animate On Scroll With Animate.css



  • Add in- and out-animation support on scroll

Add Comment