Animate On Scroll With Animate.css

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/[email protected]/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:

Animate On Scroll With Animate.css

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

Add Comment