Vue Aos

A Vue directive to add Animation on scroll to a HTML element.

Breaking changes

• use vitejs
• 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'}")

Table of content

• Introduction
• Demo
• Installation
• Usage
• Properties
• Events
• Polyfill

Introduction

The IntersectionObserver is an amazing API which allows you to observe one or more HTMLElement for when it has entered or left the viewport.

This API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.

When an element enters in the viewport, the animation start.

Demo

Demo

Installation

Simply install using your favorite package manager 🔥

NPM

npm install vue-aos --save

Yarn

yarn add vue-aos

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

Usage

.vue

<template>
  <main>
    <div v-vue-aos="{animationClass:'fadeIn animated'}">{{ msg }}</div>
    <div v-vue-aos.once="{animationClass:'fadeIn animated'}">{{ msg }}</div>
  </main>
</template>

Properties

Property	Type	Default	Required	Description
animationClass	String	''	no	CSS animation class
threshold	Number	0	no	MDN docs
root	HTMLElement	null	no	MDN docs
rootMargin	String	0px 0px 0px 0px	no	MDN docs
selector	String	'li'	no	Apply to query selector
animationstart	IntersectionObserverEntry	Event fired when animation start
animationend	IntersectionObserverEntry	Event fired when animation end

Modifiers

| once | boolean | false | no | Once time animation.

When HTML element "isIntersecting", the directive set on element a css variable --isIntersect to 1 otherwise to 0. It is useful when you want to use transition animation. Thanks to (https://twitter.com/jh3yy/status/1558551933064884225?t=JxoTN-eGP-EkmAkDcdreeg&s=08)