Implement AOS Animation On Scroll In React

Hardik Ghevariya Dec 7, 2022 0 441

Hello Developers, In this blog we are going to implement AOS animation on scroll in react using aos

First of all create a new app using following command

npx create-react-app

After that, install aos in your app

npm i aos

Then initialize aos on component mount

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

Now just add data-aos attribute to that element on which you want animation

<div data-aos='fade'>
    Lorem ipsum dolor sit amet
</div>

You can also add animation duration by adding data-aos-duration attribute (default is 400ms)

<div data-aos='fade' data-aos-duration='2000'></div>

You can add delay on animation by adding data-aos-delay attribute (default is 0 ms)

<div data-aos='fade' data-aos-delay='2000'></div>

Demo:

Check out more configurations Click here

Hardik Ghevariya