Animte Elements On Scroll - vue-animate-onscroll

Install & Download:

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

A Vue.js directive that applies a reveal effect to elements when they’re scrolled into view.

Requires the Animate.css for the CSS3 powered, scroll-triggered animations.

1. Import & register the directive.

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

2. Insert the animation classes to the desired element.

<div v-animate-onscroll="'animated bounce'">
  Element To Animate
</div>

3. Specify the animations for scroll up and scroll down events.

<div v-animate-onscroll="{down: 'animated flip', up: 'animated bounce' }">
  Element To Animate
</div>

4. If you’d like to repeat the scroll animations:

<div v-animate-onscroll.repeat="{down: 'animated flip', up: 'animated bounce' }">
  Element To Animate
</div>