Chapter 81: scrambleText - Create scrambled text animations

Core Idea

A customizable scramble text animation component with configurable timings, stagger effects, and characters.

Key Concepts

• Features: First
• Install: First
• With MotionValue: Alternatively
• Stagger: Use Motion's stagger() function to reveal characters one by one:
• Delay stagger: Stagger when each character starts scrambling:
• Direction: Use stagger's from option to control reveal direction:

Code Examples

import { scrambleText } from "motion-plus"

scrambleText("#title", { duration: 1 })

• What it demonstrates: Core usage pattern for scrambleText - Create scrambled text animations.

Key Takeaways

1. Stagger: Use Motion's stagger function for both delay and duration to create let.
2. Playback control: Returns playback controls to pause, play, hard stop or finish your a.
3. Customisable characters: Use the default alphanumeric set, or provide custom character.

Connects To

• Install Motion+ for JavaScript: related Motion doc page.