How to Implement Reveal on Scroll in React using Tailwind CSS ?
Last Updated :
24 Apr, 2025
In React, the reveal on the scroll is a technique, where elements on a page gradually appear or animate as the user scrolls down.
Prerequisites:
To implement reveal in scroll in react using Tailwind CSS we have these methods:
Step for Creating React Application and Installing Module:
Step 1:Â Create a React application using the following command:
npm create-react-app appname
Step 2:Â After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Step 3:Â After creating the React.js application, install the Tailwind CSS using the following command.
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4: Add Tailwind CSS directives into index.css file of the project.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Configure template paths in tailwind.config.js file using the following command:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
}Project Structure:Â
The updated dependencies in package.json file will look like.
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
}Approach 1: Using the Intersection Observer API
The Intersection Observer API is used to implement the reveal on scroll effect in React using Tailwind CSS. It allows you to asynchronously observe changes in the intersection of a target element with its container or the viewport.
Example: This example creates RevealOnScroll components using the tailwind classes and scroll observer.
JavaScript
// Filename - App.js
import React, { useEffect, useRef, useState } from "react";
const RevealOnScroll = ({ children }) => {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const scrollObserver = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
scrollObserver.unobserve(entry.target);
}
});
scrollObserver.observe(ref.current);
return () => {
if (ref.current) {
scrollObserver.unobserve(ref.current);
}
};
}, []);
const classes = `transition-opacity duration-1000
${isVisible ? "opacity-100" : "opacity-0"
}`;
return (
<div ref={ref} className={classes}>
{children}
</div>
);
};
const App = () => {
return (
<div className="container mx-auto text-center">
<h1 className="text-7xl font-bold mb-8 text-green">
GeeksforGeeks
</h1>
<h2 className="text-4xl ">
Reveal on Scroll in React using Tailwind CSS
</h2>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Welcome to the computer science portal!
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Web Development
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Android Development
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Data Stuctures and Algorithms
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
and more...
</p>
</RevealOnScroll>
{/* Add more RevealOnScroll components
for other elements */}
</div>
);
};
export default App;
Steps to Run the Application: Use this command in the terminal in the project directory.
npm start
Output: This output will be visible on the http://localhost:3000 on the browser window
.gif)
The Scroll Event Listener is used to implement the reveal on scroll effect in React using Tailwind CSS. It involves attaching an event listener to the scroll event of the window object or any scrollable element. When the user scrolls, the event listener fires and triggers the associated callback function.
Example: This example implements revel on scoll using scroll event listener to trigger and reveal content with cusotm scroll values.
JavaScript
// Filename - App.js
import React, { useEffect, useRef, useState } from "react";
const RevealOnScroll = ({ children }) => {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const onWindScroll = () => {
const element = ref.current;
if (element) {
const { top } = element.getBoundingClientRect();
const isVisible = top < window.innerHeight;
setIsVisible(isVisible);
}
};
window.addEventListener("scroll", onWindScroll);
return () => {
window.removeEventListener("scroll", onWindScroll);
};
}, []);
const classes = `transition-opacity duration-1000
${isVisible ? "opacity-100" : "opacity-0"
}`;
return (
<div ref={ref} className={classes}>
{children}
</div>
);
};
const App = () => {
return (
<div className="container mx-auto text-center">
<h1 className="text-7xl font-bold mb-8 text-green">
GeeksforGeeks
</h1>
<h2 className="text-4xl ">
Reveal on Scroll in React using Tailwind CSS
</h2>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Welcome to the computer science portal!
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Web Development
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Android Development
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
Learn Data Stuctures and Algorithms
</p>
</RevealOnScroll>
<RevealOnScroll>
<p className="text-3xl h-[15em] mt-[10em]">
and more...
</p>
</RevealOnScroll>
</div>
);
};
export default App;
Steps to Run the Application: Use this command in the terminal in the project directory.
npm start
Output: This output will be visible on the http://localhost:3000 on the browser window
.gif)
Similar Reads
How to Implement Smooth Scrolling using Tailwind CSS ?
Smooth scrolling refers to the scrolling of a section of the webpage when the respective link is clicked. By default when we click a link it skips directly to that element using smooth scrolling the UX improves a lot. Tailwind CSS provides a utility class named scroll-smooth which applies the CSS pr
2 min read
How to style a href links in React using Tailwind CSS ?
In this article, we will learn how we can style a href link in Reactjs. Since we use Tailwind CSS, Tailwind CSS describes itself as the first applicable CSS framework. Rather than focusing on the performance of a style object, Tailwind focuses on how it should be displayed. This makes it easier for
2 min read
How to Implement Smooth Scrolling in Action Using React-bootstrap
Smooth scrolling in React Bootstrap ensures a seamless transition between different sections of a webpage. It allows users to smoothly navigate to a specific component when they click on a particular button or tag.PrerequisiteReact JSreact-bootstrapNPM (Node Package Manager)ApproachUsing React Boots
3 min read
How to implement pagination in React using Hooks?
Implementing pagination in React using hooks involves managing the state of the current page and the number of items per page, as well as rendering the paginated data accordingly. Implementing pagination in React using Hooks:Setup Initial State: Use the useState hook to manage the state for the curr
3 min read
How to Add Dark Mode in ReactJS using Tailwind CSS ?
Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes direc
3 min read
How to add scale animation on hover using Tailwind CSS in React ?
In this article, we'll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element. PrerequisitesReact JSTailwind CSSA
3 min read
How to use Tailwind Forms Plugin with React Select ?
Tailwind CSS, a utility-first styling library for web design, offers Tailwind forms as plugins that provide a foundational reset for form styles. This simplifies the styling process for form elements, allowing easy customization with utilities. React Select, a select component library, is employed f
4 min read
How to display text on hover over image using Tailwind CSS in React.js ?
In this article, we'll see how the text appears on hover over an image using tailwind CSS in a ReactJS app. With the help of Tailwind CSS utility classes, we can display the text or image or anything after hovering over an element in Reactjs. Prerequisites:NPM & Node.jsReact JSTailwindCSSApproac
4 min read
How To Show Background Image In Tailwind CSS Using React Dynamic Url?
Tailwind CSS is a utility-first framework that uses preset classes to greatly speed up styling. However, utility classes are insufficient when handling dynamic content such as background graphics. We'll demonstrate how to use Tailwind CSS for layout and styling in a React component while managing dy
3 min read
How to use Tailwind CSS with Next.js Image ?
Integrating Tailwind CSS with Next.js enables you to style your application efficiently using utility-first CSS. When combined with the Next.js Image component, you can create responsive and optimized images with ease and consistency. In this article, we will learn how to use Tailwind CSS with Next.
3 min read