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
bower install aos –save
npm install aos –save
Next, link AOS styles and scripts:
<link rel=”stylesheet” href=”bower_components/aos/dist/aos.css”>
<link href=”https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css” rel=”stylesheet”>
That’s it, there are no other dependencies, which helps to keep your website’s performance under control.
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”>
<div class=”box b” data-aos=”flip-down”>
<div class=”box b” data-aos=”zoom-in”>
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%