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'

2. Use it as a component.

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

3. Or as a directive.

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

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


Animate On Scroll For Components Or Elements


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:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-aos

$ npm i vue-aos

Add Comment