Step One: Install AOS Using Package Managers

You can install AOS via npm or Yarn:

yarn add aos@next

or npm install --save aos@next

Next, import script and styles and initialize AOS:

import AOS from 'aos';

import 'aos/dist/aos.css'; // You can also use <link> for styles

// ..

AOS.init(); // init the library

The AOS object is exposed as a global variable; for now, there are three methods available:

init - initialize AOS

- initialize AOS refresh - recalculate all offsets and positions of elements (called on window resize)

- recalculate all offsets and positions of elements (called on window resize) refreshHard - reinitalize array with AOS elements and trigger refresh (called on DOM changes that are related to aos elements)

By default, AOS watches for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM, it calls refreshHard automatically.

In browsers that don’t support MutationObserver , like Internet Explorer, you might need to call AOS.refreshHard() by yourself.

In order to get started using AOS, here are the steps we need to take.