How to Create a Text Reveal Animation Using Framer Motion and React.js

Introduction

In this tutorial, we’ll learn how to create an engaging text reveal animation using Framer Motion and React.js. Framer Motion is a powerful library that allows for smooth and complex animations, making it perfect for enhancing the visual appeal of your React applications.

Prerequisites

• Basic knowledge of React.js, Tailwind Css
• Node.js installed on your machine
• A code editor like VSCode

Step 1: Setting Up Your React Project

First, we need to set up a new React project. If you haven't already, create a new project using Create React App:

npm create vite@latest text-reveal-animation-reactjs-framer-motion -- --template react
cd text-reveal-animation-reactjs-framer-motion
npm install

To Setup tailwind css, follow this link

https://abhishekcodes.com/blog/setup-vite-reactjs-tailwind-css/

Next, install Framer Motion:

npm install framer-motion

Step 2: Creating the Text Reveal Animation Component

Now, let's create a new component called TextReveal.js in the src directory.

// src/TextReveal.js
import React from "react";
import { motion, AnimatePresence } from "framer-motion";


const TextReveal = ({ text }) => {
  const letters = text.split("");


  return (
    <AnimatePresence mode="wait">
      <div className="flex flex-col justify-center items-center">
        <h1 className="font-bebas text-6xl text-white z-10 font-semibold overflow-hidden pt-10 mt-[-2.5rem]">
          {letters.map((item, index) => {
            return (
              <motion.span
                className="inline-block"
                animate={{ y: 0 }}
                initial={{ y: 100 }}
                key={index}
                transition={{
                  delay: index / 25,
                }}
              >
                {item}
              </motion.span>
            );
          })}
        </h1>
      </div>
    </AnimatePresence>
  );
};


export default TextReveal;

Step 3: Using the Text Reveal Component

Now, let's use the TextReveal component in the main App.js file.

import React from "react";
import TextReveal from "./TextReveal";

function App() {
  return (
    <div className="w-screen h-screen bg-black flex justify-center items-center">
      <TextReveal text="Abhishek.Codes" />
    </div>
  );
}

export default App;

Step 4: Running the Application

To see the animation in action, start your React app:

npm start

Open your browser and navigate to http://localhost:5173 to view your text reveal animation.

Conclusion

By following these steps, you've successfully created a text reveal animation using Framer Motion and React.js. This simple yet effective animation can add a touch of sophistication to your web applications, making them more engaging and visually appealing.

Be sure to check out the complete code for this tutorial on my GitHub repository here. Happy coding!