React Animation on Scroll Tutorial

Published by Pawan Sargar on

React on Scroll Animation

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.

Pawan Sargar
Follow him
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *