React Next.js Text Reveal with Gsap ScrollTrigger

Scroll-triggered animations can add a touch of interactivity and engagement to a website. In this tutorial, we’ll walk through how to use Gsap ScrollTrigger to create a text reveal effect in a React Next.js application.

Setting up the project

First, make sure you have Node.js and npm installed on your machine. Then, create a new Next.js project by running the following commands in your terminal:

npx create-next-app my-text-reveal-app
cd my-text-reveal-app

Next, install Gsap and ScrollTrigger package by running:

npm install gsap

Creating the text reveal effect

Now that the project is set up, let’s create the text reveal effect. In your Next.js project, create a new component called TextReveal.js:

import React, { useEffect, useRef } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

const TextReveal = () => {
const textRef = useRef(null);

useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo(textRef.current, { opacity: 0, y: 20 }, { opacity: 1, y: 0, scrollTrigger: { trigger: textRef.current, start: 'top 80%', end: 'top 50%', scrub: true } });
}, []);

return (

);
}

export default TextReveal;

In this component, we create a ref for the text element and use the useEffect hook to register the ScrollTrigger plugin and create the text reveal animation. We set the trigger to be the text element, and define the start and end positions for the animation to occur. The scrub: true property allows for smooth animation scrubbing as the user scrolls.

Using the TextReveal component

Now that the TextReveal component is ready, let’s use it in a page. For example, in the index.js file, we can import and use the TextReveal component:

import React from 'react';
import TextReveal from '../components/TextReveal';

const Home = () => {
return (

);
};

export default Home;

Now, when you scroll to the section with the TextReveal component, the text will animate into view.

Conclusion

Adding scroll-triggered animations to a React Next.js application using Gsap ScrollTrigger can enhance the user experience and make the website more engaging. The text reveal effect demonstrated in this tutorial is just one of many creative ways to incorporate ScrollTrigger animations into your projects.