Scramble Text Links — Free GSAP ScrambleText Snippet

The scramble effect — text dissolving into random glyphs and resolving into a new word, like a terminal decrypting itself — is a staple of studio portfolios and cyberpunk UIs. This snippet applies GSAP's ScrambleTextPlugin (free on the CDN since 3.13) in its two canonical roles: nav links that scramble-in-place on hover, and a headline that auto-cycles through roles by way of glyph noise.

How the plugin resolves text

scrambleText doesn't just flash random characters: it locks in correct characters progressively from left to right while the not-yet-resolved remainder keeps cycling through the chars set. That left-to-right lock is what reads as "decoding" rather than noise — at 50% progress, the first half of the word is legible and stable while the tail still churns. speed controls how fast the churn cycles glyphs (1.4 on the links makes short words feel electric), independent of the tween's duration, which controls how fast the lock-in front advances.

Hover scrambling targets the link's own text

Each link stores its label in data-text and scrambles *to itself* on mouseenter. That's the trick for hover effects: the element's current text is the destination, so the animation is pure transition with no content change — and repeated hovers restart cleanly because the target equals the resting state. Locking width matters less here since each link resolves to its original length, but the monospace font guarantees the churn never shifts siblings.

revealDelay makes the headline cycle read as replacement

The role cycler uses revealDelay: 0.25: for the first quarter second the *entire* word churns before the lock-in front starts advancing. Without it, the first letters of the new word would appear almost instantly and the transition would read as a fast edit; with it, there's a beat of full chaos that sells "the old word is being destroyed" before the new one assembles. chars: 'upperAndLowerCase' adds case noise to the churn, contrasting with the links' cleaner 'upperCase' set.

min-width in ch units prevents layout pumping

Cycling between ENGINEERS and DREAMERS changes string length, and mid-scramble the displayed text length fluctuates too. The .stl-role span reserves min-width: 9ch (the longest role) so the headline's layout never pumps as words churn — in a monospace font, ch units map exactly to character counts, making the reservation precise.

The loop is delayedCall, not setInterval

Each cycle schedules the next via gsap.delayedCall(1.4, nextRole) from its own onComplete. Chaining beats a fixed interval because the dwell time is measured *after* the scramble finishes — change the duration and the rhythm adapts — and delayedCalls live in GSAP's ticker, so they pause correctly if you ever pause the global timeline.

Monospace is doing quiet work

Proportional fonts make scrambles shimmer in width as wide and narrow glyphs swap — distracting at nav size, unacceptable in a headline. The mono stack keeps every churning frame the same width, which is why terminal aesthetics and scramble effects are natural partners.

Customizing it

Swap the chars set (the plugin accepts any custom string, e.g. Japanese kana or binary), scramble on scroll-into-view instead of hover, or slow speed for a lazier churn. Related text effects: the vanilla text scramble, typed cycling in gsap text rotator, glitching in glitch text, and character entrances in gsap split text.