vue3-animate-onscroll

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

Installation

``sh
npm install vue3-animate-onscroll


or


yarn add vue3-animate-onscroll
`

Setup

Import to your Vue application
`javascript
import { createApp } from 'vue';
import VueAnimateOnScroll from 'vue3-animate-onscroll';

const app = createApp(App);
app.use(VueAnimateOnScroll);
app.mount('#app');
`

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
`html




`

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



`

$3

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:
`html

Animate me upon scroll forever

`

$3

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.

`html



`
On upward scroll:
`html

Animate me once upon scroll up

`

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

`html



`

$3

Or use two different animations for each scroll direction:
`html

Animate me upon scroll forever

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

Demo

Live demo here.

Source

vue-animate-onscroll project changed to vue3