Using AOS (Animate On Scroll) in React with Tailwind CSS

If you want to add AOS (Animate On Scroll) animation to your component, here’s how you can do it step by step in a React + Tailwind CSS project:

✅ Step 1: Install AOS

npm install aos
 

✅ Step 2: Import and Initialize AOS

Add this in your main component (App.js, index.js, or where needed):

import AOS from 'aos';
import 'aos/dist/aos.css';
import { useEffect } from 'react';

useEffect(() => {
 AOS.init({
   duration: 1000, // animation duration in ms
   once: true      // animation occurs only once
 });
}, []);
 

✅ Step 3: Use AOS Attributes in JSX

Add data-aos attributes to any element:

<div 
 className='flex justify-start items-center mt-2 gap-2' 
 data-aos="fade-up"
>
 <span className='outfit text-[16px] md:text-[24px] font-medium text-[#4C9EC5] leading-none'>
   Agnesh Rathor
 </span>
 <div className='flex gap-1'>
   <Star className='text-[#ffcb0f] h-6 w-6' />
   <Star className='text-[#ffcb0f] h-6 w-6' />
   <Star className='text-[#ffcb0f] h-6 w-6' />
   <Star className='text-[#ffcb0f] h-6 w-6' />
   <Star className='text-[#ffcb0f] h-6 w-6' />
 </div>
</div>
 

🔥 Popular AOS Animation Types

⚙️ Custom AOS Attributes

You can customize each animation with these optional attributes:

data-aos="fade-up"
data-aos-delay="200"         <!-- Delay in milliseconds -->
data-aos-duration="1500"     <!-- Duration of the animation -->
data-aos-offset="120"        <!-- Trigger offset -->
data-aos-easing="ease-in-out"