Dual scramble
A dual scramble runs a shuffle on two strings at once, usually an outgoing label and an incoming one, so a swap feels like a decode rather than a cut.
scrambleTextAlso called Double scramble, Hover scramble swap, Two line decode.
Here it is working.
Hover Notes or Play. The word tears, then comes back.
For designers
Keep it to a pair of short labels. Menu and Close. Send and Sent. A season name and the next one. Both strings need a box that already fits the longer word. If only one label is changing, a single Text scramble is quieter and does the same job. Hover is the usual trigger, which means thumbs get the still pair or a tap swap with no shuffle. Do not stack 4 of these in a nav. One decode in a view is a wink. A row of them is a slot machine.
When to use dual scramble
Use this when
- Two short labels swap in the same box, often on hover.
- Both words can wait a beat, and neither is a warning.
- The wider word sets the width, so the swap does not shove the layout.
- Pointer input exists, or a tap can run the swap once.
- Reduced motion can cut straight between the two words.
Reach for something else when
- Only one string is changing. Use Text scramble.
- The letters should type in, without a decode. Use Typewriter.
- You want the outlines of one word to become the other. Use Text morph.
- The control is a button that also needs a pull. Use Magnetic button, and keep the label still.
- The label is a price, a name on a form, or anything someone is comparing. Stay still.
How to build it
Keep both finished strings in the document. Stack them in one box, or swap the visible one and hold the other for the next tween. Screen readers should hear the current label, not both, and not the noise in between. Run ScrambleText out on the first word and in on the second. Offset them by a few milliseconds so the box is never empty. Match character sets to the type. Keep each leg under 1 second. On leave, reverse the pair. Reserve the width of the longest label. Ignore the hover path on touch. On reduced motion, swap the two strings with no decode.
Official GSAP
link.addEventListener('pointerenter', () => {
gsap.to(link, { duration: 0.7, scrambleText: { text: word, chars: 'upperCase' } });
});Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.
Common questions
- Is this two scrambles or one?
- Two strings, two tweens, one box.
- How many pairs on a page?
- One. Two if they cannot be seen together.
- What about keyboard users?
- A focus swap can change the word. Do not require hover.
- Will the width jump?
- It will if you did not reserve the longer word.
- Can the incoming word be longer than the outgoing one?
- Yes, if the box was built for the longer one from the start.
- What does reduced motion do?
- Cut from word A to word B. No shuffle.
Save as skill
A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.
Use this with your AI
Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.
Last reviewed 26 AUG 2026
Next: Popping text