Framer Motion is a powerful animation library for React that makes it easy to create smooth animations. In this guide, we'll explore two different ways to animate text:

1. Animating words: The entire phrase is split into words, and each word is animated separately.
2. Animating letters: The entire phrase is split into individual letters, and each letter is animated separately.

Let's begin by installing Framer Motion.

npm install framer-motion

1. Animating Words

import { motion } from "framer-motion";

export default function Headline() {
const headline = "Create Eye-Catching Experiences With Simple UIs";
const words = headline.split(" "); // Splitting the sentence into words

return (
  <div>
    {words.map((word, index) => (
      <motion.p
        initial={{ filter: "blur(10px)", opacity: 0, y: 12 }}
        animate={{ filter: "blur(0)", opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.1 * index }}
        key={index}
        className="text-2xl font-medium text-gray-800 inline-block mr-1.5"
      >
        {word}
      </motion.p>
    ))}
  </div>
);
}

How it Works

1. The headline string is split into words using split(" ").
2. Each word is wrapped in a <motion.p> component.

Initial State:

• filter: "blur(10px)" applies a blur effect.
• opacity: 0 makes the text invisible.
• y: 12 moves the text downward.

Animate State:

• filter: "blur(0)" removes the blur.
• opacity: 1 makes the text fully visible.
• y: 0 moves the text to its original position.

Transition:

• duration: 0.5 seconds for the animation.
• delay: 0.1 * index adds a stagger effect, making each word appear in sequence.

2. Animating Letters

import { motion } from "framer-motion";

export default function Headline() {
const headline = "Create Eye-Catching Experiences With Simple UIs";
const letters = headline.split(""); // Splitting the sentence into individual letters

return (
  <div>
    {letters.map((letter, index) => (
      <motion.p
        initial={{ filter: "blur(10px)", opacity: 0, y: 12 }}
        animate={{ filter: "blur(0)", opacity: 1, y: 0 }}
        transition={{ duration: 0.2, delay: 0.05 * index }}
        key={index}
        className="text-2xl font-medium text-white inline-block mr-1.5"
      >
        {letter === " " ? " " : letter}
      </motion.p>
    ))}
  </div>
);
}

How it works

• The headline string is split into individual letters using split("").
• Each letter is wrapped in a <motion.p> component.
• Spaces are replaced with "\u00A0" (non-breaking space) to maintain spacing.

Both animations provide engaging ways to animate text in React applications using Framer Motion. Depending on the use case, you can choose between animating words or letters. Animating words provides a smoother, more readable effect, while animating letters creates a dynamic, typewriter-like effect.

Happy Coding 👋