CSS Animation Without CSS - AOS in Plain JS and React
Tags: css, javascript, react, tutorial
Published: 2020-07-06 14:13:10

> *"CSS is beautiful but hard"*.

Most developers can agree on that statement. In fact many backend developers left the frontend because of the difficulty it posed. CSS Animation is one of the most difficult part of CSS. Well, there is good news.

Developers have been developing libraries to help us boycott writing too many CSS than is necessary. That is Awesome!!!

In this article, I will be introducing you to one of those libraries. It is called [AOS (Animation on Scroll)](https://michalsnik.github.io/aos/).

AOS is a free library on [github](https://github.com/michalsnik/aos) which not only helps you animate your website but also ensure the animation only happens when you have scrolled to that part of the website. 

Without further talks, let's get practical. I will be demonstrating how to use it on React and plain JavaScript projects.

## Plain JavaScript
### Starter Project
Get the React starter Project [here](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/starter-code)

### Setting Up and Initializing
* Add the following CSS link to the head tag in the ``index.html``
```html
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
```

* Add the following script just before the closing body tag
```html
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
```

* In the ``scripts.js`` file, add the following code to initialize AOS
```javascript
AOS.init();
```

### Nav Animation
Add ``data-aos="fade-right"`` to the ``nav`` section to make it fade in from the right like so:
```html
<!-- nav -->
    <nav class="navbar navbar-default" data-aos="fade-right">
      <div class="navbar-header">
        <h1>Navigation</h1>
      </div>
    </nav>
```
*You can check it out in your browser*

> AOS offers us other options like the normal CSS animation. So, let's improve the flow and slow it a little. Our ``nav`` now looks like this

```html
<!-- nav -->
    <nav
      class="navbar navbar-default"
      data-aos="fade-right"
      data-aos-delay="50"
      data-aos-duration="1000"
      data-aos-easing="ease-in-out-cubic"
    >
      <div class="navbar-header">
        <h1>Navigation</h1>
      </div>
    </nav>
```

You See that the ``nav`` animation is smoother? That's the beauty!

> Now you get the point. Animate the other part of the web page as you desire

### Final Plain JS Code
* All codes are [here](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/js-aos-tut)
* The Webpage is live [here](https://eberegit.github.io/JS-AOS-Tutorial/)


## React
### Starter Project
Get the React starter Project [here](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/starter-code)

### Setting Up and Initializing
* Install AOS with the following code
```javascript
npm install aos --save
```
* Import and Initialize AOS in the ``App.js`` file with the following code
```javascript
import AOS from "aos";
import "aos/dist/aos.css";
AOS.init();
```

### Nav Animation

Add ``data-aos="flip-left"`` to the ``nav`` section to make it flips left like so:
```javascript
<!-- nav -->
    <nav className="navbar navbar-default" data-aos="flip-left">
        <div className="navbar-header">
          <h1>Navigation</h1>
        </div>
      </nav>
```
*You can check it out in your browser*

> AOS offers us other options like the normal CSS animation. So, let's improve the flow and slow it a little. Our ``nav`` now looks like this

```html
<!-- nav -->
    <nav
        className="navbar navbar-default"
        data-aos="flip-left"
        data-aos-delay="50"
        data-aos-duration="2000"
        data-aos-easing="ease-in-out-cubic"
      >
        <div className="navbar-header">
          <h1>Navigation</h1>
        </div>
      </nav>
```

You See that the ``nav`` animation is smoother? That's the beauty!

> Now you get the point. Animate the other part of the web page as you desire

### Final React Code
* All codes are [here](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/react-aos-tut)

### Conclusion
There are a whole lot you can do with AOS. I encourage you to play around with it and see what result you get.

If you have questions or comments, please drop them in the comment section. See you soon.