Animate On Scroll For Components Or Elements – Vue Aos

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:

Animate On Scroll For Components Or Elements

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’}”)

Download Details:

Author: Se7en-IT

Live Demo: https://se7en-it.github.io/vue-aos/

Download Link: https://github.com/Se7en-IT/vue-aos/archive/refs/heads/master.zip

Official Website: https://github.com/Se7en-IT/vue-aos

Install & Download:

# Yarn
$ yarn add vue-aos

# NPM
$ npm i vue-aos

Add Comment