Vue Scroll Anime

easy light weight animation on scroll for VueJS 3

Quick Start

Installing the plugin

npm i @goodly/vue-scroll-anime

Adding the plugin to project

Open the main.js file and import the plugin and install it

import { createApp } from 'vue'
import App from './App.vue'
import { VueScrollAnime } from '@goodly/vue-scroll-anime'

const app = createApp(App)
app.use(VueScrollAnime)
app.mount('#app')

Create CSS classes to animate dom elements

To animate classes you can define an anime class for
standard animation times for all elements or just define it
inside the class you wish to use

• anime class defines the animation delay, duration and timing
• slide-in defines the position of the element before animation
• slid-in.anime-active defines the position post animation

.anime {
    transition-delay: .5s;
    transition-duration: 1s;
    transition-timing-function: ease-in;
}
   
.slide-in {
    opacity: 0;
    transform: translateX(100px);
}
   
.slide-in.anime-active {
    opacity: 1;
    transform: translateX(0px);
}

Adding the directive

Once the above is done add the vue directive to the element you want to animate
and watch the magic happen as you scroll.

<h2 v-scroll-anime="'slide-up'">Test</h2>

How it works

This plugin works by checking if all dom elements with the v-scroll-anime directive
adds the .anime css class to them to reference them than adds an event listener to scroll
which checks if those elements are visible in the view port.

Once the elements are visible in the view port it will add the anime-active class
the elements inside the view port.

Bonus features

You can also allow the animation to happen eveerytime the elements shows up
in teh view port by adding the repeat modifier to the directive as indicated
bellow.

<h2 v-scroll-anime.repeat="'slide-up'">Test</h2>