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.

Motion pattern

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.

Updated June 2, 2026

Components

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.

Tradeoffs

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

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.

Mechanics

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.

In production

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.

FAQ

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.

PreviousParallax ScrollA parallax scroll moves layers at different rates as the user scrolls, so foreground and background drift apart and the page gains a sense of depth.NextScroll Image RevealA scroll image reveal uncovers an image as it enters the viewport, using a clip-path wipe, a mask, or a dissolve rather than a plain fade.

Related patterns

Adjacent ideas in the patterns

Text Mask RevealA text mask reveal uncovers a headline by wiping a mask across it, line by line or all at once, rather than fading it in.Magnetic ButtonA magnetic button is a call-to-action that tracks the user's cursor with spring-like easing, then releases back to its resting position when the cursor leaves.