The Animate On Scroll Library

Posted in Frontend on 1 July 2021

AOS is a simple CSS/JS based animation on scroll library by Michał Sajnóg. Easy to install and highly configurable. This is a basic introduction, there are more detailed instructions on the project’s Github Page


1. Install Sources

First step is to include the required JavaScript and Style Sheets from UNPKG.

Add the Style and Script links into the <head> section of your website. The script link below includes a defer attribute to stop it interfering with your page load times.

<link href="" rel="stylesheet">
<script defer src=""></script>


2. Initialise AOS

Before your site </body> tag include the AOS initialisation script. This must run after the aos.js script above.

        // 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
        // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
        offset: -1000, // offset (in px) from the original trigger point
        once: true, // whether animation should happen only once - while scrolling down
        mirror: false, // whether elements should animate out while scrolling past them


3. Apply your animations

To add animation ao any element use the attribute data-aos with the animation you want to use on the element. There is a massive collection of predefined animations built-into the library.

For example, a H1 which appears with a fade-right animation:

<h1 data-aos="fade-right">Animate On Scroll Library</h1>


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:


  • 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

Related Frontend Posts

July 2021

AOS: The Animate On Scroll Library

AOS is a simple CSS/JS based animation on scroll library by Michał Sajnóg. Easy to install and highly configurable. This is a basic introduction, there... Continue reading

November 2019

Simple jQuery Cookie Pop-up

This is a simple EU cookie notification pop-up for legacy websites. All that’s required is jQuery. Add the following HTML, jQuery script and apply some... Continue reading

December 2016

Testing YouTube embedded video responsiveness in WordPress

It turns out YouTube video uploads have come a long way since I last tried them out. This is a test post with no discernibly... Continue reading

More Frontend Posts