Recipe

Text animations with Motion

Animate letter by letter, word by word, or line by line.

Jeroen Reumkens pro

Text animations

1
import { stagger } from "motion/react";
2
import { useEffect } from "react";
3

4
// Get the hook right below this code block 👇
5
import { useSplitTextAnimation } from "./use-split-text-animation";
6

7
export const App = () => {
8
  const [scope, animate] = useSplitTextAnimation({
9
    splitOn: ["line", "word", "char"],
10
  });
11

12
  useEffect(() => {
13
    animate([
14
      [
15
        ".word",
16
        {
17
          opacity: [0, 1],
18
          x: [20, 0],
19
          y: [0, 20, -20, 0],
20
        },
21
        { delay: stagger(0.01) },
22
      ],
23
      [
24
        ".line",
25
        {
26
          x: [0, 20, -20, 0],
27
        },
28
        { delay: stagger(0.05) },
29
      ],
30
      [
31
        ".char",
32
        {
33
          scale: [1, 1.5, 1],
34
        },
35
        { delay: stagger(0.01), duration: 0.5 },
36
      ],
37
    ]);
38
  }, [scope, animate]);
39

40
  return (
41
    <div className="mx-auto grid min-h-dvh max-w-[600px] place-items-center">
42
      <p
43
        className="text-xl text-white opacity-0 aria-[label]:opacity-100 md:text-5xl"
44
        ref={scope}
45
      >
46
        With this hook, you can run text animations with ease. Split on
47
        character, word or even a line of text. Heck, you can even combine them
48
        all!
49
      </p>
50
    </div>
51
  );
52
};

Members only recipe

This recipe is only available to paying members. Either as part of PRO, or by purchasing this recipe individually.

Join Frontend.fyi PRO, and get access to all recipes

Join PRO

Purchase this recipe for 5 credits

Already a member? Sign in here

I’ve covered Split Text Animations before, but those tutorials had a major downside: You had to manually split the text and handle accessibility yourself. Painful.

This hook handles all that for you — and more. You can split text by characters, words, lines, or any combination you like.

Straight to the demos!

Default usage

This hook builds on top of Motion’s useAnimate() and returns:

scope: The ref to attach to the element you want to split
animate: The animate function, just like useAnimate() would return
isSplit: A boolean to check whether the text has been split (most of the times not needed)

By default, the hook splits by word, and each word gets the class .word. You can target these directly in your animations.

By default the hook will split on words.


6 collapsed lines
1
import { useEffect } from "react";
2
import { stagger } from "motion/react";
3

4
import { useSplitTextAnimation } from "./_use-split-text-animation";
5

6
export const App = () => {
7
  const [scope, animate, isSplit] = useSplitTextAnimation();
8

9
  useEffect(() => {
10
    animate(
11
      ".word",
12
      {
13
        opacity: [0, 1],
14
        x: [20, 0],
15
      },
16
      { delay: stagger(0.15) },
17
    );
18
  }, []);
3 collapsed lines
19

20
  return <div ref={scope}>Hello beautiful animation</div>;
21
};

Options

The hook accepts a configuration object with the following properties:

useSplitTextAnimation({

splitOn:

"word",

"word""line""char"["line", "char"]Any other combination as array

Defaults to "word". It is recommended to not split on more elements than needed, as this will unnecessarily increase the amount of DOM elements.

wordClassName:

"word",

string

The class name to use for the words, defaults to "word".

lineClassName:

"line",

string

The class name to use for the lines, defaults to "line".

charClassName:

"char",

string

The class name to use for the characters, defaults to "char".

});

Targeting split elements

Each split piece gets a class name. All of them can be targeted in your animations.

.word for words
.line for lines
.char for characters

Want custom class names? Pass them in the configuration object.

With Frontend.fyi PRO you will get lifetime access to all new courses and recipes released.

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: ["line", "char"],
3
});
4

5
animate([
6
  [
7
    ".line",
8
    { opacity: [0, 1], y: [20, 0] },
9
    { delay: stagger(0.15), duration: 0.2 },
10
  ],
11
  [
12
    ".char",
13
    { scale: [1, 1.5, 1], rotate: [0, 10, 0] },
14
    { delay: stagger(0.01), { delay: stagger(0.01) }},
15
  ],
16
]);

Fading in text – initial styles

The hook does not set initial styles for you. This means if you want to fade in the text, you are responsible for hiding the text initially.

The best way to do this is based on whether the aria-label attribute is present as you see in the example below. This makes sure the text is invisible until the split completes, then Motion takes over.

1
  <div class="opacity-0 aria-[label]:opacity-100">
2
    The text to be split
3
  </div>

1
  /** Assuming you want to split .content */
2
  .content {
3
    opacity: 0;
4
  }
5
  .content[aria-label] {
6
    opacity: 1;
7
  }

Notes

Accessibility

The hook automatically:

Sets aria-label to the original text content.
Ensures screen readers read the full text, not individual words/characters.

HTML inside text won’t work (yet)

This hook works with plain text only — if your text includes HTML (like <strong> or <span> inside), it will not work.

More examples

Animate When In View

Combine with useInView() for view-based animations:

Optionally you can pass {once: true} to the useInView() hook to have the animation trigger only once.

I only animate the words when they are in view.

1
const [scope, animate] = useSplitTextAnimation();
2
const isInView = useInView(scope);
3

4
useEffect(() => {
5
  if (isInView) {
6
    animate(".word", { opacity: [0, 1], x: [20, 0] }, { delay: stagger(0.15) });
7
  }
8
}, [isInView]);

Words slide up

Sprinkling some animations on the web is a great way to make it more engaging.

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: "word",
3
});
4

5
useEffect(() => {
6
  animate(
7
    ".word",
8
    { opacity: [0, 1], y: [20, 0] },
9
    { delay: stagger(0.04), duration: 0.3 },
10
  );
11
}, []);

Words slide in from right

Sprinkling some animations on the web is a great way to make it more engaging.

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: "word",
3
});
4

5
useEffect(() => {
6
  animate(
7
    ".word",
8
    { opacity: [0, 1], x: [20, 0] },
9
    { delay: stagger(0.04), duration: 0.3 },
10
  );
11
}, []);

Masked letters slide down

By adding overflow: clip to every word, you can mask each letter. It will then appear as if the letters are sliding down out of nowhere.

Sprinkling some animations

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: ["word", "char"],
3
});
4

5
useEffect(() => {
6
  animate(
7
    ".char",
8
    { y: ["-100%", 0] },
9
    { delay: stagger(0.03), duration: 0.3 },
10
  );
11
}, []);
12

13
return (
14
  <div
15
    ref={scope}
16
    className="text-xl font-bold opacity-0 aria-[label]:opacity-100 md:text-4xl [&_.word]:overflow-clip"
17
  >
18
    Sprinkling some animations
19
  </div>
20
);

1
.content {
2
  opacity: 0;
3
}
4

5
.content[aria-label] {
6
  opacity: 1;
7
}
8

9
.word {
10
  overflow-clip: clip;
11
}

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: ["word", "char"],
3
});
4

5
useEffect(() => {
6
  animate(
7
    ".char",
8
    { y: ["-100%", 0] },
9
    { delay: stagger(0.03), duration: 0.3 },
10
  );
11
}, []);
12

13
return (
14
  <div ref={scope} className="content">
15
    Sprinkling some animations
16
  </div>
17
);

Rotate and slide up lines

Sprinkling some animations on the web is a great way to make it more engaging.

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: "line",
3
});
4

5
useEffect(() => {
6
  animate([
7
    [
8
      ".line",
9
      { opacity: [0, 1], rotate: ["5deg", 0], y: [50, 0] },
10
      { delay: stagger(0.2), duration: 0.25, opacity: { duration: 0.4 } },
11
    ],
12
  ]);
13
}, []);
14

15
return (
16
  <div
17
    ref={scope}
18
    className="text-xl opacity-0 aria-[label]:opacity-100 md:text-3xl [&_.line]:origin-left"
19
  >
20
    Sprinkling some animations on the web is a great way to make it more
21
    engaging.
22
  </div>
23
);

1
.content {
2
  opacity: 0;
3
  overflow-clip: clip;
4
}
5

6
.content[aria-label] {
7
  opacity: 1;
8
}
9

10
.line {
11
  transform-origin: left;
12
}

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: "line",
3
});
4

5
useEffect(() => {
6
  animate([
7
    [
8
      ".line",
9
      { opacity: [0, 1], rotate: ["5deg", 0], y: [50, 0] },
10
      { delay: stagger(0.2), duration: 0.25, opacity: { duration: 0.4 } },
11
    ],
12
  ]);
13
}, []);
14

15
return (
16
  <div ref={scope} className="content">
17
    Sprinkling some animations on the web is a great way to make it more
18
    engaging.
19
  </div>
20
);

Loop the animation

I mean, why not? If you want you can also loop the animation endlessly.

Oooink

1
const [scope, animate] = useSplitTextAnimation({
2
  splitOn: "char",
3
});
4

5
useEffect(() => {
6
  animate(
7
    ".char",
8
    { y: [0, 20, -20] },
9
    {
10
      delay: stagger(0.15),
11
      duration: 2,
12
      repeat: Infinity,
13
      repeatDelay: 0,
14
      ease: "easeInOut",
15
      repeatType: "mirror",
16
    },
17
  );
18
}, []);