AOS (animate on scroll)

What is AOS?

AOS (animate on scroll) is a small JavaScript library that allows you to add animated effects to HTML elements when they come into view as the user scrolls down a webpage. AOS provides a set of predefined animations using CSS that can be easily applied to elements using simple data attributes in the HTML code.

Installing AOS

First you have to link to the CDN sources, Add the stylesheet in the head element,

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Add script element right before closing body tag, and initialize AOS:

  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Using AOS

Below is the default setting for AOS,

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)


  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

To set an animation you have to set the data-aos= attribute,

<div data-aos="fade-in"></div>

You can adjust the default properties,

 <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

If you want to overwrite the default properties you and make all the animation the same you can change the properties on the objects in the AOS.init(),

AOS.init(
    duration: 300,
    delay: 500
)

Here is a list of all the pre-defined properties,

Fade animations:

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

Flip animations:

• flip-up
• flip-down
• flip-left
• flip-right

Slide animations:

• slide-up
• slide-down
• slide-left
• slide-right

Zoom animations:

• 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

Anchor placements:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing functions:

• 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

Here are some code examples to try

Example 1

  <div data-aos="fade-up">
    <p>
    This is a test.
    </p>
   </div>

Example 2

<div data-aos="fade-left" data-aos-delay="300" data-aos-duration="1000">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Veniam voluptas vero magnam veritatis iure libero maiores 
      blanditiis consectetur, voluptatem animi ullam doloremque 
      reprehenderit unde quis eius quaerat aspernatur labore mollitia?
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque 
      similique veniam iusto quae rem mollitia vel, quod, laborum consequuntur 
      quo soluta culpa blanditiis placeat vitae minima optio reprehenderit illum nisi.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, deserunt
       assumenda temporibus magnam mollitia sit et veritatis rerum eius at 
       nam quam. Laborum amet nemo quibusdam! Fugit corrupti ullam odit.
    </p>
    </div>

Example 3

    <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam voluptas vero magnam veritatis iure libero
         maiores blanditiis consectetur, voluptatem animi ullam doloremque reprehenderit unde quis eius quaerat aspernatur labore mollitia?
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque similique veniam iusto quae rem mollitia
         vel, quod, laborum consequuntur quo soluta culpa blanditiis placeat vitae minima optio reprehenderit illum nisi.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, deserunt assumenda temporibus magnam
         mollitia sit et veritatis rerum eius at nam quam. Laborum amet nemo quibusdam! Fugit corrupti ullam odit.
      </p>
    </div>

Example 4

    <div
    data-aos="flip-down"
    data-aos-offset="200"
    data-aos-delay="1000"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out-cube"
    data-aos-mirror="false"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Veniam voluptas vero magnam veritatis iure libero
         maiores blanditiis consectetur, voluptatem animi ullam 
        doloremque reprehenderit unde quis eius quaerat aspernatur labore mollitia?
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque similique
         veniam iusto quae rem mollitia vel, quod, laborum consequuntur quo soluta culpa blanditiis 
         placeat vitae minima optio reprehenderit illum nisi.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, 
        deserunt assumenda temporibus magnam mollitia sit et veritatis rerum eius at nam quam. 
        Laborum amet nemo quibusdam! Fugit corrupti ullam odit.
      </p>
    </div>