React Animation on Scroll Tutorial

Today we’ll create a beautiful on-scroll animation effect on a React website. Having animations on websites can make your project stand out from others and also it feels more premium for the user.

But, adding animations from scratch can be a bit painful, right? Don’t worry, we are not going to use CSS & JS to create animation, but an amazing JavaScript library called AOS (Animate on Scroll).

AOS is also available for React via NPM, also you can check out their documentation here.

So, now before getting started make sure you have a React app created already to follow along. Ok, let’s get started.

This is what we’ll create –

Install AOS –

You can install the AOS library directly to the React app via NPM or Yarn.

npm install aos

yarn add aos

Import AOS & AOS Stylesheet –

import Aos from "aos";
import "aos/dist/aos.css";

Initialize AOS –

Before using AOS animations, we need to initialize the AOS using aos.init().

useEffect(() => {
    Aos.init({ duration: 2000 });
  }, []);

Here, we are initializing the AOS and setting the duration of all animations as 2000ms. We can add more options inside the init function to add global animation styles.

The reason why we are initializing AOS in useEffect hook is to run the AOS every time we refresh our document, just so we don’t break the animation.

Adding Animations –

Now, adding animations is super easy, we just need to add attribute data-aos to the elements and specify the animation type we want to add.

import "./styles.css";
import Aos from "aos";
import "aos/dist/aos.css";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    Aos.init({ duration: 2000 });
  }, []);

  return (
    <div className="App">
      <h1>React AOS Tutorial</h1>

      <div data-aos="fade" className="container one">
        1
      </div>
      <div data-aos="fade-up" className="container two">
        2
      </div>
      <div data-aos="flip-up" className="container three">
        3
      </div>
      <div data-aos="fade-left" className="container four">
        4
      </div>
      <div data-aos="slide-right" className="container five">
        5
      </div>
    </div>
  );
}

And that’s it. That’s how simple it is to add amazing On Scroll animation effects in React using AOS library.

There are many animation types, you can check out the documentation here.

I hope this post was helpful, if it was let us know in the comments below.

• Author
• Recent Posts

Follow him

Pawan Sargar

Blogger at Coding Master

Pawan Sargar is a self-taught web developer & content writer. He is passionate about helping people learn about web development & tech through easily digestible content. He also owns a tech blog waystoweb.com and you can find him on twitter.

Follow him

Latest posts by Pawan Sargar (see all)

• JavaScript String Methods that you should Know! - November 25, 2021
• React Carousel Slider Tutorial for Beginners – - November 20, 2021
• What is Technical Writing? Beginners Guide 2022 - November 12, 2021