vue-animate-onelscroll
v1.1.1
Published
A simple Vue directive that animates elements as they scroll into view.
Downloads
3
Readme
vue-animate-onelscroll
A simple Vue directive that animates elements as they scroll into view.
Installation
npm install vue-animate-onelscroll
# or
yarn add vue-animate-onelscrollSetup
Import to your Vue application
import Vue from 'vue'
import VueAnimateOnElScroll from 'vue-animate-onelscroll'
Vue.use(VueAnimateOnElScroll)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-onelscroll="'animated flip'">Animate me once upon scroll</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-onelscroll.repeat="'animated flip'">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-onelscroll="{down: 'animated flip'}">Animate me once upon scroll down</div>On upward scroll:
<div v-onelscroll="{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-onelscroll.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-onelscroll="{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
todo
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.