vue-animate-onscroll's Introduction

vue-animate-onscroll

A simple Vue directive that animates elements as they scroll into view.

Installation

npm install vue-animate-onscroll
# or
yarn add vue-animate-onscroll

Setup

Import to your Vue application

import Vue from 'vue'
import VueAnimateOnScroll from 'vue-animate-onscroll'

Vue.use(VueAnimateOnScroll)

Usage

For demo purposes, let's use animate.css, a css animation library but using your own custom CSS animations would work the same way as well.

Import animate.css anyway you like. For demo purposes, in your index.html

<head>
  <!-- some other stuff -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
</head>

Pass the desired class as a string literal (in single quotes) in your Vue template:

<div v-animate-onscroll="'animated flip'">Animate me once upon scroll</div>

Offset

To trigger the animation with an offset at the top and the bottom you can add an data-animate-onscroll-offset attribute like:

<div v-animate-onscroll="'animated flip'" data-animate-onscroll-offset="100">Animate me upon scroll with an offset of 100px</div>

Repeat Modifier

Note that by default the animation will only trigger once: the first time the element scrolled into view. If you want to repeat the animation everytime it was scrolled into view, use the repeat modifier:

<div v-animate-onscroll.repeat="'animated flip'">Animate me upon scroll forever</div>

In-/Out-Animations

For an infinity in- and out-animation on scroll you can use in and out keys. For the best result use a combination with data-animate-onscroll-offset:

<div v-animate-onscroll.repeat="{in: 'animated flipInX', out: 'animated flipOutX'}" data-animate-onscroll-offset="100">Animate me upon scroll forever</div>

Scroll Direction

It's also possible to animate only on a specific scroll direction by passing in an object as the value. In the following example, the animation will only trigger the first time you scroll down on the element.

<div v-animate-onscroll="{down: 'animated flip'}">Animate me once upon scroll down</div>

On upward scroll:

<div v-animate-onscroll="{up: 'animated rotateOut'}">Animate me once upon scroll up</div>

If you want to repeat the animation everytime you scroll down to the element add the repeat modifier:

<div v-animate-onscroll.repeat="{down: 'animated flip'}">Animate me everytime you scroll down on me</div>

Multiple animations

Or use two different animations for each scroll direction:

<div v-animate-onscroll="{down: 'animated flip', up: 'animated rotateOut' }">Animate me upon scroll forever</div>

Note that by providing both up and down directions, the repeat modifier is implicitly in effect.

Demo

Live demo here.

License

vue-animate-onscroll by Joseph Harvey Angeles is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at https://github.com/josephharveyangeles/vue-animate-onscroll.

vue-animate-onscroll's Issues

IE11

Does this package support IE11?