Chapter 82: splitText

Core Idea

Learn how to use the splitText() function to break down text content into individual characters, words, and lines, enabling granular text animations. Understand how to target these split components with CSS classes, customize splitting behavior, and troubleshoot common issues with custom fonts or existing HTML tags.

Key Concepts

• Features: First
• Install: First
• Techniques & troubleshooting: To perform enter animations
• Enter animations: To perform enter animations
• Working with custom fonts: If you have custom fonts that download after splitText is executed

Code Examples

import { splitText } from "motion-plus"

• What it demonstrates: Core usage pattern for splitText.

Key Takeaways

1. Animate anything: Split text into characters, words and lines to animate each independ.
2. Lightweight: Only adds 0.7kb to your project bundle.
3. Simple API: A clean API leaves your code maintainable.
4. Accessible: Correctly applies ARIA tags to leave your text readable for all users.
5. Flexible: Animate with Motion, CSS, or a libra.

Connects To

• Text animation: related Motion doc page.
• Install Motion+ for JavaScript: related Motion doc page.
• hover(): related Motion doc page.