Warning: Your browser is very out-of-date. You should upgrade to a better browser.

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, the H1 above loads with the following 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

Hello, I'm Keith, a website developer in Belfast, Northern Ireland working with PHP, Magento, Shopify and WordPress.

I've been building websites for over 10 years, from custom website development to bespoke web applications, Shopify and Magento ecommerce and Online Leaning Environments. I've worked on a range of projects and am always looking out for the next interesting project.

Related Frontend Posts

Frontend 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...
Notes Frontend 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...
WordPress Frontend 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...

More Frontend Posts...