Animate Elements On Scroll – AOS

Preview:

Description:

AOS is a standalone JavaScript library which uses CSS3 animations to animate elements on vertical page scrolling.

AOS detects the page scroll events and animate specified elements when they’re scrolled into view.

Installation:

# Yarn
$ yarn add aos@next
# NPM
$ npm install aos@next --save

How to use it:

You just add aos.css and aos.js into the html page and you’re ready to go.

<link rel="stylesheet" href="dist/aos.css">
<script src="dist/aos.js"></script>

Specify the animation name using aos attribute as follow:

• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left
• flip-up
• flip-down
• flip-left
• flip-right
• slide-up
• slide-down
• slide-left
• slide-right
• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

<div class="aos-item" aos="fade-up">
  Element here
</div>

You are able to config the scroll-triggered animation for each element via aos-* attribute as listed below:

• aos-offset: 120 – Change offset to trigger animations sooner or later (px)
• aos-duration: 400 – Duration of animation (ms)
• aos-easing: ‘ease’ – Choose timing function to ease elements in different ways: linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart
• aos-delay: 0 – Delay animation (ms)
• aos-anchor: null – Anchor element, whose offset will be counted to trigger animation instead of actual elements offset
• aos-anchor-placement: ‘top-bottom’ – Anchor placement – which one position of element on the screen should trigger animation: top-bottom, top-center, top-top, center-bottom, center-center, center-top, bottom-bottom, bottom-center, bottom-top
• aos-once: false – Choose wheter animation should fire once, or every time you scroll up/down to element

You can also change the default configuration options during init.

AOS.init({
  offset:     120,
  delay:      0,
  easing:     'ease',
  duration:   400,
  disable:    false, // Condition when AOS should be disabled. e.g. 'mobile'
  once:       false,
  mirror:     false, // whether elements should animate out while scrolling past them
  startEvent: 'DOMContentLoaded'
});

Global settings.

AOS.init({
  // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  disable: false, 
  // name of the event dispatched on the document, that AOS should initialize on
  startEvent: 'DOMContentLoaded',
  // class applied after initialization
  initClassName: 'aos-init', 
  // class applied on animation
  animatedClassName: 'aos-animate', 
  // if true, will add content of `data-aos` as classes on scroll
  useClassNames: false
  
});

Changelog:

v3.0.0 beta3 (08/20/2018)

• Update