Cool on Scroll Animations Made Easy With the AOS Library

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. There are many libraries to make this task easier for us. AOS, also called Animate on Scroll, is one such library and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

Here, you will learn about the inner workings of AOS, how to install the library and get it to work. By the end of this tutorial, building animations on scroll for your clients will be a breeze.

How to Install the AOS Library

You can install AOS using Bower or npm.

Bower:

bower install aos --save

npm:

npm install aos --save

Next, link AOS styles and scripts:

<link rel="stylesheet" href="bower_components/aos/dist/aos.css">

<script src="bower_components/aos/dist/aos.js"></script>

If you prefer, you can download the AOS stylesheet and JavaScript files using a CDN as follows:

The CSS:

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

The JavaScript:

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

That’s it, there are no other dependencies, which helps to keep your website’s performance under control.

To initialize AOS, just write the line below in your JavaScript file.

AOS.init();

Getting Started With AOS

After initializing the library all you have to do is add some specific attributes.

To use basic animations you just need to add data-aos="animation_name" to your HTML elements.

There are several types of animation you can choose from. For example, you can add fade animations like “fade”, “fade-up” and “fade-down-left”. Similarly, you can also add flip and slide animations like “flip-up”, “flip-left”, “slide-down”, and “slide-right”.

Here’s the markup of our first example:

<div class="box a" data-aos="fade-up">
  <h2>Animated using fade-up.</h2>
</div>
<div class="box b" data-aos="flip-down">
  <h2>Animated using flip-down.</h2>
</div>
<div class="box b" data-aos="zoom-in">
  <h2>Animated using zoom-in.</h2>
</div>

Besides the initialization line in the previous section, animating the elements doesn’t require you to do anything else.

Have a look at the code above in action:

See the Pen Animate on Scroll Examples by SitePoint (@SitePoint) on CodePen.

Configuring Your Animations With AOS Data Attributes

Let’s dive into the list of the data attributes you can use to configure your animations.

• data-aos-offset — You can use this attribute to trigger the animation sooner or later than the designated time. Its default value is 120px.
• data-aos-duration — You can use this attribute to specify the duration of the animation. The duration value can be anywhere between 50 and 3000 with steps of 50ms. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. This range should be sufficient for almost all animations. The default value for this attribute is 400.
• data-aos-easing — You can use this attribute to control the timing function for animating different elements. Possible values are: linear,ease-in-out and ease-out-quart. You can see a list of all accepted values on the project’s Readme file on GitHub.

Here’s an example using data-aos-duration and data-aos-easing:

More data attributes you can use are:

• data-aos-anchor — This attribute is useful when you want to trigger the animation based on the position of some other element. It accepts any selector as its value. The default value is null. This means that all the animations will be triggered with respect to the element’s own position.
• data-aos-anchor-placement — By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using the data-aos-anchor-placement attribute. As its value, this attribute accepts two words separated by a hyphen. For example, you can set it to top-bottom, top-center or top-top. Three such combinations are also possible for both the center and bottom values.
• data-aos-once — You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down. By default, the animations are replayed every time the elements scroll into view. You can set the value of this attribute to false in order to animate the elements only once.

Below is an example of using data-aos-anchor-placement:

Exploring the AOS Library’s Inner Workings

The aim of Animate on Scroll is to handle the logic and the animation separately. For this purpose, the logic is written inside the JavaScript but the animation is written inside the CSS. This separation permits us to write our own animations and modify them based on the needs of the project in a very clean and maintainable workflow.

The library keeps track of all the elements and their positions. This way it can dynamically add or remove the aos-animate class based on the settings that we have provided. For example, the aos-animate class is removed whenever the elements to which it is applied move out of the viewport. However, if an element has the value of data-aos-once set to true, the aos-animate class will not be removed from that particular element, thereby preventing any animation from happening on subsequent scroll events that bring the element into view.

AOS also applies the default value of attributes to the <body> element on the HTML document. For example, data-aos-easing will be set to ease and data-aos-duration to 400 .

As I have already mentioned, the library applies animation duration only in the range of 50 to 3000 with steps of 50ms. This means that by default, you cannot have an animation duration of 225ms. However, you can add that duration yourself using CSS as follows:

body[data-aos-duration='225'] [data-aos],
[data-aos][data-aos][data-aos-duration='225']{
  transition-duration: 225ms;
}

Adding your own custom animations to AOS is also quite straightforward.

Just create a data-aos attribute selector and set it to the name of your custom animation.

Next, add the property you want to animate with its initial value, as well as the transition property set to the name of the property you want to animate.

For example, let’s say your animation is called rotate-c and the element to which it is applied is initially rotated by -180 degrees.

Here’s what your CSS should look like:

[data-aos="rotate-c"] {
  transform: rotate(-180deg);
  transition-property: transform;
}

To set the final stage of your animation (in our example this will be the element rotating from -180 degrees to 0 degrees) you add the following CSS rule just below the previous one:

[data-aos="rotate-c"].aos-animate {
  transform: rotate(0deg);
}

Now add data-aos="rotate-c" to your chosen HTML element and this will rotate clockwise (from -180 degrees to 0 degrees) as users scroll that element into view.

Here’s a live demo showing custom rotation animations both clockwise and anti-clockwise using the method above:

More Features

The AOS library also provides a lot of other features that make it even more flexible and user friendly. Instead of providing attributes for each element separately, you can pass them as an object to the init() function. Here is an example:

AOS.init({
  offset: 200,
  duration: 800,
  easing: 'ease-in-quad',
  delay: 100,
});

You can also disable the animations on certain devices or under certain conditions using the disable key and setting its value to a device type like mobile, phone or tablet. Alternatively, you can also disable the library using a function.

Here are two examples to illustrate both features:

AOS.init({
  disable: 'mobile'
}); 

AOS.init({
  disable: function () {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
  }
});

In this Pen, when the screen is smaller than 800px, AOS animations are disabled using the function above:

Besides init(), AOS also provides two additional functions: refresh() and refreshHard().

refresh() is used to recalculate all elements’ offsets and positions. It is called automatically on events like window resize.

refreshHard() is called automatically whenever new elements are programmatically removed from or added to the DOM. This way the library can keep the array of AOS elements updated. Once the array has been updated, refreshHard() also triggers the refresh() function to recalculate all the offsets.

Conclusion

This tutorial has introduced you the Animate on Scroll library which you can use to animate elements as you scroll up or down the webpage.

Having no dependencies and letting you create your own custom animations are two features that make AOS a great choice of library for scrolling animations.

If you’re interested in JavaScript animation, you might also like to check out JS with Performance: requestAnimationFrame by Tim Evko.

Have your ever tried AOS in a project? How was your experience? Feel free to share some tips with fellow readers.