Creating engaging animations can significantly enhance the user experience on your website. In this blog post, we will explore how to implement an SVG text decoration animation using React and the motion library.

Prerequisites

Before we start, ensure you have the following:

• Basic knowledge of React
• A React project set up (you can use Create React App)
• The motion library installed. You can install it using:
• SVG line that is made by your design tool of choice (i have used Figma)
  See Full Picture

  

npm install motion

Create the Animated Component

We will create a functional component called AnimatedTextSpan. This component will contain our animated text and SVG line.

"use client";

import { motion } from "motion/react";

export const AnimatedTextSpan = () => {
  return (
    <div className="w-full h-svh bg-neutral-900 text-neutral-700 text-center flex items-center justify-center">
      <h1 className="max-w-6xl font-light uppercase text-9xl">
        Cogito Ergo Sum, I{" "}
        <span className="relative">
          <span className="relative z-20 font-bold italic text-white">
            think
          </span>
          <svg
            className="w-full z-10 h-full absolute top-0 left-0 bottom-0 right-0"
            viewBox="0 0 400 160"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <motion.path
              initial={{ pathLength: 0 }}
              whileInView={{ pathLength: 1 }}
              transition={{ duration: 2, ease: [0.22, 1, 0.36, 1] }}
              d="M16.5 4C137.5 14.5 368.2 19.1 373 29.5C379 42.5 29.5 23 20.5 33C11.5 43 389 47 391 54C393 61 4 60 4 70C4 80 385 60.5 385 75.5C385 90.5 20.5 71.5 20.5 90C20.5 108.5 396 93.5 396 100C396 106.5 42.5 109.5 39 119C35.5 128.5 378 114.5 381.5 137C384.3 155 268 156.5 209.5 155"
              stroke="#8EB20D"
              strokeWidth="8"
              strokeLinecap="round"
            />
          </svg>
        </span>{" "}
        therefore I am
      </h1>
    </div>
  );
};
          

Conclusion

In this tutorial, we created an animated SVG text decoration using React and the motion library. This simple yet effective animation can add a dynamic touch to your web applications. Feel free to experiment with different paths, colors, and animation durations to create your unique effects!