Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Animations on Scroll with HTML, CSS and AOS.js
AOS.js (Animation on Scroll) is an animation-providing JavaScript library that makes it easier to add tons of animations by simply changing the name of the class in the div tag in which you want to add an animation. While there are different animation JavaScript libraries out there, AOS.js is probably the simplest of them.
In this tutorial, we will explore different types of animations that we can use in AOS.js with the help of different examples.
The first category of animations that we will explore are the fading one's. Before we do that, we first need to make sure that aos.css and aos.js are available to us in our code, and we can get them through the help of CDN links.
You just need to paste the below code snippet at the end of the <head> tag in your HTML code.
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
The above code snippet will help in getting the css file and in order to get the js file, we need to paste the CDN code snippet shown below at the end of the body tag in our HTML code.
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>
Once we added both the above code snippets in our HTML code, we are ready to make use of AOS in our code.
Fade Animation Using AOS.js
The Fade animation simulates the fading behaviour and in total, there are 8 different animations that can be achieved with it. These are −
fade-up
fade-down
fade-left
fade-right
fade-up-left
fade-up-right
fade-down-left
fade-down-left
Now let's make use of all of them one by one in a simple HTML-CSS example.
The below code snippet is the only part in which we will make changes for all the above fade animations.
<div id="main"> <div data-aos="fade-up">Something up!</div> </div>
In the above code, we are passing the value to the data-aos property as "fade-up" and in all the fading cases, only this value will be changed.
index.html
Now, let's consider the following index.html file in which we will do the "fade-up" animation.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="fade-up">Something Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
When you run the above code in the browser, you should see a div with the text "Something Up!" coming in the fading animation towards the upward direction.
Similarly, if we want to do the fading-down animation, we can make use of the <div> shown in the code snippet below.
<div id="main"> <div data-aos="fade-down">Something down!</div> </div>
We just need to replace the <div> in the index.html file with the above div to get the fade-down animation.
For Fade-left, the code snippet is shown below.
<div id="main"> <div data-aos="fade-left">Something left!</div> </div>
For Fade-right, the code snippet is shown below.
<div id="main"> <div data-aos="fade-right">Something right!</div> </div>
For Fade-up-left, the code snippet is shown below.
<div id="main"> <div data-aos="fade-up-left">Something up left!</div> </div>
For Fade-up-right, the code snippet is shown below.
<div id="main"> <div data-aos="fade-up-right">Something up right!</div> </div>
For Fade-down-left, the code snippet is shown below.
<div id="main"> <div data-aos="fade-down-left">Something down left!</div> </div>
For Fade-down-right, the code snippet is shown below.
<div id="main"> <div data-aos="fade-down-right">Something down right!</div> </div>
With this, we can conclude that Fading animations in AOS are done.
Flip Animation Using AOS.js
Flip animation simulates the flipping behaviour and in total there are 4 different animations that can be achieved with it. These are −
flip-up
flip-down
flip-left
flip-right
Now let's use of all of them one by one in a simple HTML-CSS example.
index.html
Let's consider the following index.html file in which we will do the "flip-up" animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="flip-up">Flip Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
When you run the above code in the browser, you should see a div with the text "Flip Up!" coming in the flipping animation towards the upward direction.
Similarly, if we want to do the flipdown animation, we can make use of the <div> shown in the code snippet below.
<div id="main"> <div data-aos="flip-down">Flip down!</div> </div>
For Flip-left, the code snippet is shown below.
<div id="main"> <div data-aos="flip-left">Flip left!</div> </div>
For Flip-right, the code snippet is shown below.
<div id="main"> <div data-aos="flip-right">Flip right!</div> </div>
Zoom Animation Using AOS.js
The Zoom animation simulates the zooming behaviour and in total there are 8 different animations that can be achieved with it. These are −
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
Now let's use all of them one by one in a simple HTML-CSS example.
index.html
Let's consider the following index.html file in which we will do the "zoom-in" animation.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
#body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="zoom-in" data-aos-duration="3000">Zoom in!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
When we run the above code in the browser, we should see a div with the Text Zoom in the zooming animation towards the upward direction.
Similarly, if we want to do the zoom-in-up animation, we can make use of the <div> shown in the code snippet below.
<div id="main"> <div data-aos="zoom-in-up">Zoom in up!</div> </div>
For Zoom-in-down, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-in-down">Zoom in down!</div> </div>
For Zoom-in-left, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-in-left">Zoom in left!</div> </div>
For Zoom-in-right, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-in-right">Zoom in right!</div> </div>
Similarly, if we want to do the zoom-out animation, we can make use of the <div> shown in the code snippet below.
<div id="main"> <div data-aos="zoom-out">Zoom out!</div> </div>
For Zoom-out-up, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-out-up">Zoom out up!</div> </div>
For Zoom-out-down, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-out-down">Zoom out down!</div> </div>
For Zoom-out-left, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-out-left">Zoom out left!</div> </div>
For Zoom-out-right, the code snippet is shown below.
<div id="main"> <div data-aos="zoom-out-right">Zoom out right!</div> </div>
Multiple Setting Animations Using AOS.js
In all the examples that we had above, we were using a single animation with no other options, but AOS.js allows us to use options with animations as well. For example, consider the case where we would want a fade-down animation but with a duration of sometime in it.
In the below code snippet, we will create a fade-down animation which has a duration attached to it.
<div id="main"> <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div> </div>
Conclusion
In this tutorial, we demonstrated how you can create animations while scrolling with the help of AOS.js, HTML and CSS.
2K+ Views
