Add animation on scroll using HTML, CSS and AOS.js

AOS.js (Scroll Animation) is a JavaScript library that provides animations, making it easier just by changing the class name in the desireddivtag Add a lot of animations to add animations. While there are different animation JavaScript libraries, AOS.js is probably the simplest of them all.

In this tutorial, we will explore the different types of animations that can be used in AOS.js with the help of different examples.

The first type of animation we will explore is the fade animation. Before doing that, we first need to make sure thataos.cssandaos.jsare available in our code and that we can get them via a CDN link.

Simply paste the following code snippet at the end of the

The above code snippet will help to get thecssfile, in order to get thejsfile we need to paste the CDN code snippet as shown below at the end of the body tag in the HTML code .

After adding the above two code snippets to the HTML code, we can use AOS in the code.

Use AOS.js fade animation

The fade-in and fade-out animation simulates the fade-in and fade-out behavior, and a total of 8 different animations can be achieved. these are -

• fade in and fade out

• fade in and fade out

• Fade left

• Fade right

• Fade left

• Fade right

• Fade left

• Fade left

Now let’s use them one by one in a simple HTML-CSS example.

The code snippet below is the only part where we will make changes to all the above fade animations.

 
Something up!
 

In the above code, we pass the value as "fade-up" to thedata-aosattribute, and in all fade cases, only this value will be changed.

index.html

Now, let's consider the followingindex.htmlfile where we will perform a"fade out"animation.

Example

         
         
         
         

          

           
          
         
         

          

           
          
         
         

          

           Something Up!
          
         

When you run the above code in your browser, you should see adivcontaining the text "Something Up!" appearing in an upward direction with a fade animation.

Similarly, if we want to perform afadeanimation, we can use the one shown in the code snippet below.

 
Something down!
 

We only need to replace the div in the index.html file with the above div to get the fade animation.

ForFade to the left, the code snippet looks like this.

 
Something left!
 

For thefade, thecode snippet is as follows.

 
Something right!
 

ForFade-up-left, thecode snippet is shown below.

 
Something up left!
 

ForFade-up-right, thecode snippet is shown below.

 
Something up right!
 

ForFade left, the code snippet looks like this.

 
Something down left!
 

ForFade-down-right, thecode snippet is shown below.

 
Something down right!
 

At this point, we can conclude that the fade animation in AOS has been completed.

Use AOS.js flip animation

Flip animation simulates flipping behavior, and a total of 4 different animations can be achieved. these are -

• On the turn

• Turn down

• Flip left

• Turn right

Now let’s use them one by one in a simple HTML-CSS example.

index.html

Let's consider the followingindex.htmlfile where we will perform a"flip up"animation.

         
         
         
         

          

           
          
         
         

          

           
          
         
         

          

           Flip Up!
          
         

When you run the above code in your browser, you should see adivwith the text "Flip Up!" Appears with a flip animation in the upward direction.

Similarly, if we want to do a flip-down animation, we can use the one shown in the code snippet below.

 
Flip down!
 

Forleft flipping, the code snippet is as follows.

 
Flip left!
 

Forright flipping, the code snippet is as follows.

 
Flip right!
 

Using AOS.js scaling animation

Zoom animation simulates zoom behavior, and a total of 8 different animations can be achieved. these are -

• enlarge
• enlarge
• Zoom
• Zoom left
• Zoom right
• Zoom
• enlarge
• Zoom
• Zoom left
• Zoom right

Now let’s use them one by one in a simple HTML-CSS example.

index.html

Let us consider the followingindex.htmlfile where we will perform a "zoom in" animation.

Example

         
         
         
         

          

           
          
         
         

          

           
          
         
         

          

           Zoom in!
          
         

When we run the above code in the browser, we should see adivwith the Text Zoom pointing upwards in its zoom animation.

Similarly, if we want to perform azoom-in animation, we can use the one shown in the code snippet below.

 
Zoom in up!
 

Forzoom, the code snippet is shown below.

 
Zoom in down!
 

ForZoom to the left, the code snippet looks like this.

 
Zoom in left!
 

Forzoom to the right, the code snippet looks like this.

 
Zoom in right!
 

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

 
Zoom out!
 

对于放大，代码片段如下所示。

 
Zoom out up!
 

对于缩小，代码片段如下所示。

 
Zoom out down!
 

对于向左缩小，代码片段如下所示。

 
Zoom out left!
 

对于向右缩小，代码片段如下所示。

 
Zoom out right!
 

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

 
>Fade Down With Duration!