Skip to content

Latest commit

 

History

History
90 lines (58 loc) · 3.16 KB

README.md

File metadata and controls

90 lines (58 loc) · 3.16 KB
Raw

Vue Aos

A Vue component to add Animation on scroll to a Vue component or HTML element.

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

Usage

The package acts as an abstract component, much like what you may know from keep-alive or transition.

This means that it's basically a "decorator". A component which does not output any markup to the DOM, but adds the functionality under the hood 😱.

.vue

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

<script>
  import VueAos from 'vue-aos'

  export default {
    components: { VueAos }
  }
</script>

Properties

Property Type Default Required Description
animation-class String '' no CSS animation class
threshold String 0.5 no MDN docs
root HTMLElement null no MDN docs
rootMargin String 0px 0px 0px 0px no MDN docs

Events

Name Arguments Description
animationstart IntersectionObserverEntry Event fired when animation start
animationend IntersectionObserverEntry Event fired when animation end

Polyfill

The IntersectionObserver API is not currently available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you'll need to add a poylfill to your bundle.

WICG IntersectionObserver Polyfill is highly recommended.