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 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="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script defer src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

2. Initialise AOS

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

<script>
    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
        
        // 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
        
    });
</script>

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>

Animations

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

AOS
The Animate On Scroll Library