Chapter 31: ScrambleText: Scrambled text animations for React

Core Idea

A customizable scramble text animation component for React with configurable timings, characters and renderless animation.

Key Concepts

• Features: First
• Install: First
• Stagger: Use Motion's stagger() function to reveal characters one by one:
• Delay: Stagger when each character starts scrambling by passing stagger to delay:
• Direction: Use stagger's from option for controlling the direction of stagger:

Code Examples

<ScrambleText>{text}</ScrambleText>

• What it demonstrates: Core usage pattern for ScrambleText: Scrambled text animations for React.

Key Takeaways

1. Stagger: Use Motion's stagger function for both delay and duration to create let.
2. Performant: Renders via Motion's high-performance animation loop, skipping React re-re.
3. Playback control: Toggle the active prop to start/stop scrambling, perfect for hover.
4. Customisable characters: Use the default alphanumeric set, or provide custom character.

Connects To

• motionValue: related Motion doc page.
• Install Motion+ for React: related Motion doc page.