Animate On Scroll With Animate.css

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

Install & Download:

# Yarn
$ yarn add vue-animate-onscroll

# NPM
$ npm install vue-animate-onscroll --save

How to use it:

  1. Install, import and register the directive.
import VueAnimateOnScroll from 'vue-animate-onscroll'
Vue.use(VueAnimateOnScroll)
  1. Load the latest Animate.css library in the document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/animate.min.css" />
  1. Animate an element when it is scrolled into view.
<div v-animate-onscroll="'animated flash'">
  Animate me
</div>
  1. Determine whether to repeat the animation.
<div v-animate-onscroll.repeat="'animated flash'">
  Animate me
</div>
  1. Determine the animations depending on the scroll direction.
<div v-animate-onscroll="{down: 'animated flash', up: 'animated rotateOut' }">
  Animate me
</div>

Download Details:

Author: vycoder

Live Demo: https://vue-animate-onscroll.netlify.com/

Download Link: https://github.com/vycoder/vue-animate-onscroll/archive/master.zip

Official Website: https://github.com/vycoder/vue-animate-onscroll

#vuejs #javascript #vue-js

Animate On Scroll With Animate.css
82.20 GEEK