Animate Content on Scroll with Just One Line Of code

Using the amazing AOS library

[AOS library demo](https://cdn.hashnode.com/res/hashnode/image/upload/v1630754098159/mH295aSs_.html). Source: Author. AOS library demo. Source: Author.

As developers, we spend a lot of our time trying to make our sites beautiful.

However, it is complicated to make our website feel beautiful.

That’s where animations come in.

Using animations, you can make your website feel alive and dictate the flow of content.

Thankfully there are fabulous libraries that enable us to animate sites without much hassle.

One such library is the AOS library which I have been using for the past few months.

Before I get into how you can add amazing animations with this library, we must first list the benefits of using animations in the first place.

Fluidity: With proper popup and fade animations you can add fluidity to how your website reacts to user inputs and displays the data.
Progress: If storytelling or displaying slides is one of the aims of your site, then animations are a must.
Polished: When the content of your site loads up gradually instead of just popping up bluntly, it gives the impression that the site is polished and professional.
Context: In long websites, animations can be used in a great way to provide context to users that they haven’t yet reached the page and there is more content below.

Now that we have outlined some of the uses of animations, we can get started.

Installation

Getting the AOS library up and running is quite simple.

You can use package managers such as NPM to install the library by running the following command:

npm install --save aos@next

Then, we need to import the library and the CSS into our script file.

import AOS from 'aos';
import 'aos/dist/aos.css';

However, I will be using the alternative approach which would require us to modify our index HTML file as shown below.

We need the stylesheet in our index HTML file by adding the following line between the <head></head> tags:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

We also need to add a JavaScript file. To do so, paste the line below at the end of the closing </body> tag.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

That's it! You have successfully installed the AOS library.

Initialization

Now that we have our AOS library setup, we need to first initialize it.

You can do so in your JavaScript file as well as the HTML file between the <script></script> tags using the following line of code:

AOS.init();

The initialization is one line, however, you can also pass the optional settings object which will allow you to set throttle delay, frequency of animation, offset, duration, and much more.

You can find more on that here.

Adding Animations

Now comes the best part.

The AOS library greatly simplifies adding animations on scroll.

We just need to wrap content that we want to animate with the appropriate data-aos attribute.

<div data-aos="fade-in">

...
...Content to be animated...
....

</div>

Fade in Animation on loop. Source: author.

We can even adjust the animations to fit our requirements by using data-aos-* attributes.

Some of the common attributes that I found myself tweaking are the duration and easing of the animations.

To customize the duration, we can provide time in milliseconds to the data-aos-duration attribute as shown below:

<div data-aos="fade-in" data-aos-duration="8000">
</div>

The full list of adjustments is given below:

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
>
</div>

But how would you know the list of supported animations?

The full list of supported animations as well as anchor placements and easing functions can be found here.

Custom Animations

In spite of providing us with a comprehensive set of animations, this library understands that sometimes we need our custom animations and thus gives us the ability to add them.

We need to use the [data-aos=”new-animation”] in our CSS file. Here “new-animation” is the name of our custom animation.

You can set the name to whatever you want but make sure it doesn’t match with the built-in ones.

You can make custom animations the following way:

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

  &.aos-animate {
    opacity: 1;
  }

}

As you can see, the principles of standard keyframes of CSS animations apply here.

However, we use &.aos-animate instead of to .

To make the comparison simpler, here is a standard plain CSS animation example.

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

Now to use this “new-animation” we can simply use it like any other built-in AOS library animation.

<div data-aos="new-animation"></div>

Other properties such as duration can be set just like the other built-in animation by using data-aos-* attribute.

This greatly simplifies adding and customizing animations.

Conclusion

Building websites and apps are getting more complex every passing day and libraries like this take away the burden of working tirelessly to perfect those animations.

AOS library can even work with frameworks as well as vanilla JavaScript. Moreover, once installed, using it is very straightforward.

Despite the simplicity offered by this library, we get a lot of options to truly customize the animations to match our site requirements.

Using such libraries can help you focus on working on things that matter the most.

Such libraries are a blessing for developers who have a tight deadline and want to come up with websites that not only look beautiful but also feel the same.