Add Animations On Scroll with AOS

Did you ever wish your website to have those fancy animations firing when you scroll down the page? I did and I recently took the time to learn one way to achieve it. Let's see together how we can do this.

We will go through the steps of implementing AOS scripts and styles in order to manage on scroll animation as easily as possible.

Prepare your code

We can download the files by going to AOS website, Github or Downloading their file.

If we are more into CDN's, here are the CSS and Javascript sources.

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Now we will want to add data-aos attributes on our element to be animated.

<section data-aos="fade-left"></section>

And last but not least, we need to initiate the script with this single line.

AOS.init();

We now have a basic, default on scroll animation. What if we need to change some animation settings?

Opt for your settings

There are two sets of options we have influence on in this library. The global settings you can only change when you initiate the script and the attribute settings you can define at initiation but also through HTML attributes.

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
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});

As it is the only setting that is not so clear, we will see how to disable AOS. We can use predefined value of mobile or desktop but if we want a specific pixel value, here is what we need to do.

AOS.init({
  // AOS would work only for windows bigger than or equal to 768px
  disable: function() { var maxWidth = 768; return window.innerWidth < maxWidth; }
});

We have determined settings for all the animations. What if we want a specific component to behave differently than the others?

Chose your animation

Here the 3 types of animation present in AOS library. They are specified in the data-aos attribute as I already mentioned.

• Fade animations
• Flip animations
• Zoom animations

You can also define other parameters as listed in the Init settings. The goal is to define a different duration, easing, delay, anchor or offset.
This is what an element could look like.

<section data-aos="zoom-out" 
         data-aos-duration="3000" 
         data-aos-easing="linear" 
         data-aos-delay="1000">
</section>

We saw how a single element can be animated on its own based on AOS pre-built attributes. What if we want a totally new animation?

Create your own animation

AOS allow us to create your own animations, without touching a bit of Javascript. Let's see how a few CSS lines can do wonders.
We need to work on two states:

1. Before animation
2. After animation

/* Before animation*/
[data-aos="my-animation"] {
  transform: rotate(360deg) scale(0.5);
  opacity: 0;
  transition-property: transform, opacity;
}
/* After animation */
[data-aos="my-animation"].aos-animate {
  transform: rotate(0) scale(1);
  opacity: 1;
}

The browser will do the work; animating from one state to the other.
We only need to specify our new animation on one HTML element with the attribute data-aos="my-animation".

Live example on Codepen

Isn't an example worth a million words? 😄

After the integration of AOS on my first project, I must say I'm impressed. It is way more straightforward than I imagined it would be!
Huge thank to michalsnik!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇