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-onscrollSetup
Import to your Vue application
VueUsage
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
<!-- some other stuff --> Pass the desired class as a string literal (in single quotes) in your Vue template:
Animate me once upon scrollRepeat 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:
Animate me upon scroll foreverScroll 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.
Animate me once upon scroll downOn upward scroll:
Animate me once upon scroll upIf you want to repeat the animation everytime you scroll down to the element add the repeat modifier:
Animate me everytime you scroll down on meMultiple animations
Or use two different animations for each scroll direction:
Animate me upon scroll foreverNote 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.