Create the Ultimate User Experience with AOS (Animate on Scroll)

#css #html #webdev #ux

What is AOS?

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. AOS (Animate on Scroll) is the most popular library for the purpose of making this task easier for us.

AOS is a library developed by Michał Sajnóg and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

To see an example of a project using AOS, click here.

Demo

The animation effects available by default are shown below.
NOTE: The animations can be further customized using the various properties like data-aos-duration.

Installing AOS

AOS can be installed 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>

AOS stylesheet and JavaScript files can also be downloaded using a CDN as follows:

CSS:

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

JavaScript:

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

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

AOS.init();

Using AOS

After the setup, just add data-aos="<animation-name>" to the HTML elements to use basic animations. For example

<div data-aos="fade-up">
    ...
</div>

<div data-aos="flip-down">
    ...
</div>

<div data-aos="zoom-in">
    ...
</div>

Configuring the Animation

Additional properties can be used to configure the animations:

data-aos-delay: You can use this attribute to specify the delay of the animation play time. The duration value can be anywhere between 0 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. The default value for this attribute is 0.
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 (not exhaustive) values are: linear, ease-in-out and ease-out-quart
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 true in order to animate the elements only once.

Adding Custom Animations

Sometimes built-in animations are just not enough. Let's create an animation depending on the resolution of the screen. Here's one approach to do it:

style.css

[data-aos="new-animation"] {
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    [data-aos="new-animation"] {
        transform: translateX(100px);
    }
    [data-aos="new-animation"].aos-animate {
        transform: translateX(0);
    }
}