Animate HTML Elements on Scrolling without Coding

Animation is any visual effects applied on a web page to make it look interactive and interesting. Mostly, animating the elements on a web page can be achieved by using CSS and JavaScript. However, some people find it difficult because they do not know what CSS properties to use or what JavaScript codes to be applied. Moreover, when it comes to animation on scrolling, it is when user sees HTML elements when they scroll the page up and down, the work turns a little bit tricky. So, in this post, I will show you how to animate html elements on scrolling without coding CSS and JS by yourself. What? Without coding? Well, someone else had done it for us so all we need to do is to implement it.

Animate on Scrolling (AOS) Library

Animate on Scrolling, AOS, is a CSS-JS Library created by Michalsnik to help us add animation on any HTML elements on scrolling. It can be used for free and is available on Github.

Like using Bootstrap or jQuery, all we need to do is to add a <link> and <script> tags that refer to the CSS and JS files (there are only two files, amazing!) of the library.

Installing AOS

If you have control on your website, you can download the files from AOS Github and put the into your assets folder. Then, you add the following tags in the header of the page.

<link rel="stylesheet" type="text/css" href="path/to/your/assets/folder/aos.css"/>

<script type="text/javascript" src="path/to/your/assets/folder/aos.js"></script>

<script>AOS.init();</script>

Othewise, if you are using Blogger like me, you can put the following tags in the header of the template.

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

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

<script>AOS.init();</script>

Implementing AOS

Now, after installing AOS, we need to add attributes data-aos to the elements that we want to animate on scroll. There are plenty of animations that we can implement like fade, flip, and so on. Below are some examples of the attribute values.

Fade animations:

I use data-aos-duration="1000" data-aos="fade-up"

1. fade
2. fade-up
3. fade-down
4. fade-left
5. fade-right
6. fade-up-right
7. fade-up-left
8. fade-down-right
9. fade-down-left

Flip animations:

1. flip-up
2. flip-down
3. flip-left
4. flip-right

Slide animations:

I use data-aos-duration="1000" data-aos="slide-up"

1. slide-up
2. slide-down
3. slide-left
4. slide-right

Zoom animations:

I use data-aos-duration="1000" data-aos="flip-up"

1. zoom-in
2. zoom-in-up
3. zoom-in-down
4. zoom-in-left
5. zoom-in-right
6. zoom-out
7. zoom-out-up
8. zoom-out-down
9. zoom-out-left
10. zoom-out-right

Anchor placements:

1. top-bottom
2. top-center
3. top-top
4. center-bottom
5. center-center
6. center-top
7. bottom-bottom
8. bottom-center
9. bottom-top

Easing functions:

I use data-aos-duration="1000" data-aos="fade-down"

1. linear
2. ease
3. ease-in
4. ease-out
5. ease-in-out
6. ease-in-back
7. ease-out-back
8. ease-in-out-back
9. ease-in-sine
10. ease-out-sine
11. ease-in-out-sine
12. ease-in-quad
13. ease-out-quad
14. ease-in-out-quad
15. ease-in-cubic
16. ease-out-cubic
17. ease-in-out-cubic
18. ease-in-quart
19. ease-out-quart
20. ease-in-out-quart

Well, they are amazing, aren't they? Happy animate. For more detail, check on Offical AOS page.