Skip to content

A Vue component to add "animation on scroll" to a Vue component or HTML element

Notifications You must be signed in to change notification settings

Se7en-IT/vue-aos

Repository files navigation

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

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)

About

A Vue component to add "animation on scroll" to a Vue component or HTML element

Resources

Stars

Watchers

Forks

Packages

No packages published