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:

[code language="bash"]
bower install aos --save
[/code]

npm:

[code language="bash"]
npm install aos --save
[/code]

Next, link AOS styles and scripts:

[code language="html"]
<link rel="stylesheet" href="bower_components/aos/dist/aos.css">

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

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

The CSS:

[code language="html"]
<link href="http://ift.tt/2qyqevs" rel="stylesheet">
[/code]

The JavaScript:

[code language="html"]
<script src="http://ift.tt/2rRxI0L"></script>
[/code]

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.

[code language="js"]
AOS.init();
[/code]

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:

[code language="html"]
<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>
[/code]

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.

Continue reading %Cool on Scroll Animations Made Easy With the AOS Library%

by Gajendar Singh via SitePoint