Scramble text - garbage-to-content reveals

.scramble resolves the element's text through garbage characters via GSAP's ScrambleTextPlugin - no opacity fade, the scramble is the reveal. Only the element's own top-level text runs are scrambled (each wrapped in its own span); nested elements (a, icons, spans) are left untouched. Like any spawn it gets .scroll, .scroll-progress, .appear, .leave and timing tunables for free.

<p class="scramble appear time-2">Hello world</p>

<!-- no empty start - finished string flips to garbage then sweeps back -->
<p class="scramble-all appear time-2">GClass</p>

<!-- modifiers -->
<p class="scramble appear time-2 reveal-delay-1 chars-[01] amount-2">010101</p>
<p class="scramble scramble-rtl appear time-2">right → left</p>

.scramble - empty → resolved

Starts from empty, each top-level text run scrambles through the character pool until it locks to its real content. Defaults to a linear ease so time-N is the true total reveal time - an explicit ease-* (e.g. ease-power2.out) overrides.

.scramble-all - garbage sweep

No empty start. The already-visible string flips to garbage as a whole and sweeps back to itself - the native ScrambleText resolve, not typing.

Demo - nested elements preserved

Only bare text nodes scramble. The link and badge below keep their markup while the surrounding words scramble around them.

Tunables

<p class="scramble appear time-3 reveal-delay-1 chars-[01]">0101</p>
<p class="scramble-all appear time-2 amount-3 scramble-rtl">RTL sweep</p>
<p class="scramble scroll time-2">replays on scroll enter</p>

Text is segmented per top-level text node - whitespace-only runs stay as bare text so spacing is preserved, and each run's trimmed core is wrapped in a span to avoid ScrambleText's trim swallowing edge spaces. Segments are cached per element (_gcScrambleSegs) so engine re-inits and .appear replays reuse spans. Keep scrambled text short - each segment is a ScrambleText tween.