Anime.js Scramble Text

A lightweight text scramble effect built into anime.js v4. Hover over any element on this page to see the scramble animation in action.

Features

• Named character sets and range syntax for the chars parameter
• Directional reveal with the from parameter
• Adjustable interval between each character
• Per-character settle duration control
• Deterministic output with seeded random
• Cursor pattern for sweep-style effects
• Perturbation to randomize timing and order
• Fill character for different-length transitions
• Works with any easing function

How It Works

The scrambleText helper returns a function-based tween value. Each target element gets its own closure that captures the original text content and computes a per-character reveal timeline. Characters transition through random values before settling on their final position.

The animation duration is automatically calculated from the text length and timing parameters, ensuring consistent visual pacing regardless of content size, or use the duration parameter to set an exact duration that overrides the computed value.