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' Vue.use(VueAnimateOnScroll)
2. Load the latest Animate.css library in the document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@latest/animate.min.css" />
3. Animate an element when it is scrolled into view.
<div v-animate-onscroll="'animated flash'"> Animate me </div>
4. Determine whether to repeat the animation.
<div v-animate-onscroll.repeat="'animated flash'"> Animate me </div>
5. Determine the animations depending on the scroll direction.
<div v-animate-onscroll="{down: 'animated flash', up: 'animated rotateOut' }">
Animate me
</div>
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
</div>
Preview:
Changelog:
07/21/2022
- Add in- and out-animation support on scroll
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
Install & Download:
# Yarn
$ yarn add vue-animate-onscroll
# NPM
$ npm install vue-animate-onscroll --save