Chapter 33: Text animation

Core Idea

How to animate text on the web with Motion. Split text into characters, words and lines, then build rolling hover labels, typewriters, scrambles, counters and scroll reveals.

Key Concepts

• Split text: "Split text" is
• About inline-block: A <span> is display: inline by default.
• Stagger: Splitting text is just the first step.
• Clipped containers: In the previous split text example
• Rolling text hover: This effect is usually called a rolling text hover
• Stagger the characters: Already the whole-label roll looks great
• Scramble text: Scramble text animations cycles characters through random characters before settling on th
• Typewriter: A typewriter animation attempts to make it look like text is being typed in by a human.
• Number animation: Counters

Code Examples

<h1>
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</h1>

• What it demonstrates: Core usage pattern for Text animation.

Key Takeaways

1. Text animation supports Split text.
2. Text animation supports About inline-block.
3. Text animation supports Stagger.

Connects To

• splitText: related Motion doc page.
• stagger: related Motion doc page.
• React motion component: related Motion doc page.
• ScrambleText: Scrambled text animations for React: related Motion doc page.
• scrambleText - Create scrambled text animations: related Motion doc page.