DEV Community

loading...
Cover image for Create the Ultimate User Experience with AOS (Animate on Scroll)

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

ruppysuppy profile image Tapajyoti Bose Updated on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

npm:

npm install aos --save
Enter fullscreen mode Exit fullscreen mode

Next, link AOS styles and scripts:

<link rel="stylesheet" href="bower_components/aos/dist/aos.css">
Enter fullscreen mode Exit fullscreen mode
<script src="bower_components/aos/dist/aos.js"></script>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

JavaScript:

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

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

AOS.init();
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Then use it in HTML:

<div data-aos="new-animation"></div>
Enter fullscreen mode Exit fullscreen mode

The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.

Reference

  1. AOS repository
  2. Sitepoint Blog

Thanks for reading

Reach out to me on:

Discussion (4)

pic
Editor guide
Collapse
mahbubhasan1 profile image
Mahbub Hasan

Thank you so much 💝

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Glad if my blog was helpful

Collapse
bgrand_ch profile image
Collapse
ruppysuppy profile image