HOW TO USE AOS SCROLL ANIMATION EFFECT IN REACT

Hi, I am Avi & today I will share a simple but powerful animation effect on React Js . Its called AOS animations.

Its simple to use like eating food & I’m not joking.

lets start form installation.

for bower >>

bower install aos — save

for npm>>

npm i aos — save

for Yarn>>

npm i aos — save

Now after complete the installation you need import two things in the component where you want to use the scroll animation effect >>

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

Then you need to initialize aos like this >>

useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);

With functional components and hooks (useEffect) I did like this:

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
function App() {
  useEffect(() => {
    AOS.init();
    AOS.refresh();
  }, []);
  return (
    // your components
  );
}
export default App;

Now comes the best part . you need to go here & copy the animation into your div/image/paragraph/header anywhere you want like this. only the data-aos part.

<div data-aos="fade-up"></div>

I think it will help you to create simple scroll animation effect on your project.

If you need more detailed information please visit here.