Animte Elements On Scroll – vue-animate-onscroll

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

You Might Be Interested In: