Is the GSAP ScrambleText plugin free?

Yes. As of GSAP 3.13 (mid-2024) every GSAP plugin, including ScrambleText, is free for commercial use. The old Club GreenSock paywall is gone. Install via `npm i gsap` and import from `gsap/ScrambleTextPlugin`.

How do I keep scramble text accessible?

Set the final text as the element's real content in the DOM, and run the scramble as a visual overlay. Screen readers read the settled text, not the random glyphs. Respect prefers-reduced-motion by skipping the scramble and showing the final string immediately.

Can I scramble between two different words?

Yes - that's the Text Morph variant. Instead of scrambling from nothing to a word, you scramble from word A through random glyphs into word B. The plugin handles it; the trick is matching character counts or padding the shorter string so layout doesn't jump.

Scramble Text

A scramble text effect cycles each character through random glyphs before settling on the final letter, like a terminal decrypting a message. It draws the eye to a headline or label without moving layout, and reads as 'technical' and deliberate. The effect is built on GSAP's ScrambleText plugin, free for commercial use since GSAP 3.13.

Solved by: 3 Annnimate components
Pairs with: Text Mask Reveal Magnetic Button

Updated June 2, 2026

Studio Original

Text Scramble

scroll

Components that solve this

Text ScrambleText runs through random characters before it lands on the real words, and you pick the character set, speed and trigger.

Dual ScrambleText scrambles through a brand colour and then settles into its final colour.

Text MorphLetters slide into new positions as you type, so the text feels alive as it changes.

Tuning the pattern

Scramble speed: Text Scramble defaults `scramble-speed` to 0.03s per glyph cycle (range 0.01 to 0.15); stay near 0.02 to 0.04 for a crisp decrypt, push toward 0.10 only when you want each character to visibly linger as a slower, more deliberate reveal.
Character set: Uppercase reads cleanest and most intentional for a headline, the `mixed` default (uppercase plus numbers) gives a technical terminal texture, and Dual Scramble's symbol-heavy `chars` string is the right call only for hover nav labels where the noise is brief enough to not look like junk.
Trigger: Scroll-enter (the default) suits headlines that should resolve as the user arrives, hover suits nav labels where the scramble rewards intent, and `load` or `manual` (Dual Scramble) fits loading and status text; never run an on-load scramble below the fold where the user never sees it settle.

When scramble text fits

Scramble text rewards a single focal moment. It works when the text itself is the subject, not the container.

Hero headlines on a technical or developer-facing product
Hover labels on navigation that should feel responsive and crafted
Stat counters where the number 'resolves' into place
Loading or status text where the scramble signals 'working'

Don't scramble body copy

The effect is illegible mid-animation. Use it on short labels and headlines, never on paragraphs a user needs to read. Scrambling a sentence longer than a few words just delays comprehension.

How the scramble works

GSAP's ScrambleText plugin tweens the scrambleText property on an element. It progressively reveals the real characters left-to-right while filling the unrevealed positions with random glyphs from a configurable character set.

script.js

For per-character control beyond the plugin (independent timing, color shifts), some Annnimate components run a custom scramble loop with gsap.utils.random selecting glyphs each frame, driven by a single timeline so the whole effect stays scrubable and reversible.

Annnimate components that solve this pattern

The Text Scramble component does scroll-triggered scramble-in on a headline, with configurable character set and speed
The Dual Scramble component runs two scramble layers (label + underline reveal) coordinated on one timeline for hover-driven nav links
The Text Morph component cross-fades between two strings through a scramble transition rather than a hard swap

All three ship in React, Vue, and HTML/CSS/JS, with a prefers-reduced-motion fallback that sets the final text instantly.

Common questions

Is the GSAP ScrambleText plugin free?: Yes. As of GSAP 3.13 (mid-2024) every GSAP plugin, including ScrambleText, is free for commercial use. The old Club GreenSock paywall is gone. Install via npm i gsap and import from gsap/ScrambleTextPlugin.
How do I keep scramble text accessible?: Set the final text as the element's real content in the DOM, and run the scramble as a visual overlay. Screen readers read the settled text, not the random glyphs. Respect prefers-reduced-motion by skipping the scramble and showing the final string immediately.
Can I scramble between two different words?: Yes - that's the Text Morph variant. Instead of scrambling from nothing to a word, you scramble from word A through random glyphs into word B. The plugin handles it; the trick is matching character counts or padding the shorter string so layout doesn't jump.