Description:
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.
How to use it:
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>
Preview:
Download Details:
Author: josephharveyangeles
Live Demo: https://vue-animate-onscroll.netlify.com/
Download Link: https://github.com/josephharveyangeles/vue-animate-onscroll/archive/master.zip
Official Website: https://github.com/josephharveyangeles/vue-animate-onscroll
Install & Download:
# Yarn
$ yarn add vue-animate-onscroll
# NPM
$ npm install vue-animate-onscroll --save