Animate Elements On Scroll – AOS

Category: Animation , Javascript , Recommended | August 20, 2018
Author: michalsnik
Views Total: 8,501
Official Page: Go to website
Last Update: August 20, 2018
License: MIT

Preview:

Animate Elements On Scroll – AOS

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 [email protected]

# NPM
$ npm install [email protected] --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

You Might Be Interested In:


Leave a Reply