Animate Your Web Content Using Animate On Scroll Library 
Tags: webdev, programming, css
Published: 2021-08-22 05:36:21

![photo](https://miro.medium.com/max/1400/1*dU9yLW9qBzXtLnN0ZH2JGw.jpeg)

About 3 months ago, while developing my website, I thought about making my website even cooler. This is what I want to do : I want items on my website to appear only when I scroll to them. In other words, before scrolling, the item will not exist. Hard enough to imagine? Roughly the result like this:

![ilustration](https://miro.medium.com/max/1238/1*JRAwD6-G9idO33hmZ9deMA.gif)

This animation can be created with the Animate On Scroll (AOS) library by michalsnik at [michalsnik.github.io](michalsnik.github.io/aos).

## Get Started
There are 2 ways to add this library to your website. The first way is to install it, and the second way is through the CDN service. I myself use a CDN service. Here is some code you should add. 

### CSS 
add this code inside the `head` tag in your HTML code.

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

### Javascript 
add this code at the very bottom of your `body` tag.

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

### Initialize AOS 
Finally, add the following code to your javascript file.

```javascript 
AOS.init();
``` 

If you have done all of the things above, then you are ready to use this library. 

## Animation 
In order to have an animation, add the data-aos attribute to the html tag you want. With this `data-aos`, your tags now have animations. There are different values ​​in the `data-aos` attribute, different values ​​mean different animations. Here are some of them : 
- `data-aos="fade-up"` , for moving-up
- `data-aos="fade-down"` ,for moving-down
- `data-aos="fade-right"`, for move to the right
- `data-aos="fade-left"`, for move to the left
- `data-aos="fade-flip-left"`, for flip to the left
- `data-aos="fade-flip-right"`, for flip to the right
- `data-aos="zoom-in"`, for zoom in
- `data-aos="zoom-out"`, for zoom-out 

Actually, there are many more data-aos values ​​available. For more complete data-aos, you can visit the official Animate On Scroll website at michelsnik.github.io.

## Live Demo 
I will show you how to use animate on scroll library. 

### 1. Set Up Standard HTML Tag 
this file contains the basic html tags to create a box with the words box 1 , box 2 and so on. 
```html 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class='container'>
<div class='box'>box 1</div>
<div class='box'>box 2</div>
<div class='box'>box 3</div>
<div class='box'>box 4</div>
</div>
</body>
</html>
``` 

### 2. Prepare CSS files for basic styles 

This file contains the basic styles for box such as background color, padding, margins, and so on. 

```css
.box{
  text-align:center;
  font-size:2em;
  padding:90px;
  border-radius:8px;
  border:5px #33ff33;
  margin: 30px;
  background:#66ff66;
  width:auto;
  height:30px;
}
.container{
  background:#3385ff;
  padding:auto;
  padding-top:20px;
  padding-bottom:20px;
}
```

### 3. Add CDN code to import AOS library

#### CSS
Add this code inside the head tag
```html
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
``` 

#### Javascript

add this code at the very bottom of your body tag.
```html
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
``` 

### 4. Initialize AOS

add the following code to the javascript file.
```javascript
AOS.init(); 
``` 

after all of the things above is done, the result will be like this: 

{% codepen https://codepen.io/fikrinotes/pen/RwVGrXG %} 

Keep in mind that you can change the style of the above CSS as you wish. In the example above I only use 4 types of data-aos. You can see more complete documentation on [this website](michalsnik.github.io/aos). 

To see the implementation of this AOS data on the website, you can visit my website which also uses the AOS library [here](https://fikrinotes.netlify.app/boring_math).