DEV Community

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on • Updated on

CSS Animation Without CSS - AOS in Plain JS and React

"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).

AOS is a free library on github 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

Setting Up and Initializing

  • Add the following CSS link to the head tag in the index.html
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode
  • Add the following script just before the closing body tag
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • In the scripts.js file, add the following code to initialize AOS
AOS.init();
Enter fullscreen mode Exit fullscreen mode

Nav Animation

Add data-aos="fade-right" to the nav section to make it fade in from the right like so:

<!-- nav -->
    <nav class="navbar navbar-default" data-aos="fade-right">
      <div class="navbar-header">
        <h1>Navigation</h1>
      </div>
    </nav>
Enter fullscreen mode Exit fullscreen mode

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

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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
  • The Webpage is live here

React

Starter Project

Get the React starter Project here

Setting Up and Initializing

  • Install AOS with the following code
npm install aos --save
Enter fullscreen mode Exit fullscreen mode
  • Import and Initialize AOS in the App.js file with the following code
import AOS from "aos";
import "aos/dist/aos.css";
AOS.init();
Enter fullscreen mode Exit fullscreen mode

Nav Animation

Add data-aos="flip-left" to the nav section to make it flips left like so:

<!-- nav -->
    <nav className="navbar navbar-default" data-aos="flip-left">
        <div className="navbar-header">
          <h1>Navigation</h1>
        </div>
      </nav>
Enter fullscreen mode Exit fullscreen mode

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

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (10)

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

I want to add something to the conversation.
If you are using React or NextJS

put your

AOS.init()
Enter fullscreen mode Exit fullscreen mode

Inside a useEffect like so

useEffect(() => {
    AOS.init();
},[])
Enter fullscreen mode Exit fullscreen mode

Without useEffect it will generate an error saying "document is not defined"

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you very much for your contribution.

Collapse
 
mxldevs profile image
MxL Devs • Edited

Nice, declarative animation framework can speed things up tremendously.

Of course, one should understand the fundamentals to be able to build their own custom stuff, but for the average user who just wants to spice up their websites/profiles with a little extra on top without spending hours or days practicing CSS, letting someone else handle it makes things a lot easier.

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Yes. Your points are valid.Thank you for taking your time to read through.

Collapse
 
udokaokoye profile image
Udoka Okoye

Nice Article my bro...it really helped me :)

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you.
I am happy you found it helpful

Collapse
 
reworkingwork profile image
Reworking

This is beautiful!

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

It really is. Thank you for going through 🤗

Collapse
 
amankumar001 profile image
Aman Kumar

This is Awesome bro!!!

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you for taking your time