The Animate On Scroll (AOS) 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:

Flip animations:

Slide animations:

Zoom animations:

Anchor placements:

Easing functions:

linear

More Frontend posts

Animated SVGs (Scalable Vector Graphics)

Animated SVGs, Scalable Vector Graphics, are increasingly popular choices for adding dynamic elements to websites. Their scalability, lightweight nature, and flexibility make them attractive options for graphic elements and background…

Continue reading

Accessibility in ecommerce websites

In the digital age, where online shopping has become an integral part of our lives, ecommerce websites hold the key to business success. Amidst the rush to create visually appealing…

Continue reading

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…

Continue reading

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 CSS - example supplied.…

Continue reading