Animate On Scroll For Components Or Elements – Vue Aos

Install & Download:

# Yarn
$ yarn add vue-aos
# NPM
$ npm i vue-aos

Description:

A Vue.js library that applies Animate On Scroll to components or elements within your app.

How to use it:

1. Install and register the vue-aos.

import Vue from 'vue'
import * as VueAos from 'vue-aos'
Vue.use(VueAos)

2. Use it as a component.

<template>
  <vue-aos animation-class="myAnimationClass">
    <div>{{ msg }}</div>
  </vue-aos>
</template>

3. Or as a directive.

<div v-vue-aos="{animationClass:'myAnimationClass'}">
  {{ msg }}
</div>

4. Available props.

threshold: {
  type: Number,
  default: 0.5
},
root: {
  type: HTMLElement,
  default: () => null
},
rootMargin: {
  type: String,
  default: () => '0px 0px 0px 0px'
},
animationClass: {
  type: String
},
visibility: {
  type: String,
  default: 'hidden'
}

5. Events.

• @animationstart(IntersectionObserverEntry): fired when animation start
• @animationend(IntersectionObserverEntry): Event fired when animation end

Preview:

Changelog:

v3.0.0 (08/15/2022)

• remove component version (useless)
• remove visibility props
• threshold default value to 0
• add .once modifiers
• add css variable –isIntersecting (1|0)
• add selector properties for apply IntersectionObserver to children selector (example: v-vue-aos=”{selector: ‘li’}”)