The scramble() effect wraps text characters and rapidly cycles through random glyphs before resolving each character to its final value. Supports multiple reveal orders and looping.
// Basic usage
Domma.effects.scramble('.hero-title');
// With options
const ctrl = Domma.effects.scramble('.heading', {
scrambleDuration: 1200,
revealOrder: 'random',
loop: true,
loopDelay: 3000,
onComplete: () => console.log('Decoded!')
});
// Control
ctrl.pause();
ctrl.resume();
ctrl.restart();
ctrl.destroy();
Click to decode the text left-to-right.
Different orders for character resolution.
Domma.effects.scramble('#el', { revealOrder: 'left-to-right' });
Domma.effects.scramble('#el', { revealOrder: 'right-to-left' });
Domma.effects.scramble('#el', { revealOrder: 'random' });
Domma.effects.scramble('#el', { revealOrder: 'center-out' });
Infinite loop with configurable delay between cycles.
Domma.effects.scramble('.headline', {
loop: true,
loopDelay: 2000,
scrambleDuration: 1000,
revealOrder: 'random'
});
Use custom characters for the scramble animation.
Domma.effects.scramble('#binary', {
characters: '01',
scrambleDuration: 1500,
speed: 80
});
Adjust scramble duration and resolve speed.
| Option | Type | Default | Description |
|---|---|---|---|
speed | number | 50 | Ms per character resolve |
scrambleSpeed | number | 30 | Ms between scramble frame updates |
characters | string | A-Z, a-z, 0-9, symbols | Character pool for scramble glyphs |
revealOrder | string | 'left-to-right' | 'left-to-right', 'right-to-left', 'random', 'center-out' |
scrambleDuration | number | 800 | How long each char scrambles before resolving (ms) |
stagger | number | 0 | Delay between multiple elements (ms) |
loop | boolean|number | false | false, true (infinite), or number of loops |
loopDelay | number | 2000 | Ms between loops |
respectMotionPreference | boolean | true | Honour prefers-reduced-motion |
onComplete | function | null | Callback when animation completes |
onCharacter | function | null | Callback per character resolved (char, index) |