004
AI ready

Text Scramble Decode

£5

A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real text. Scroll, hover, click or auto-play, in any accent colour.

ScrollTrigger intermediate
4 more details
text-animationscramblescroll-revealhover-effect
Text Scramble Decode - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Text Scramble Decode demo in new tab

About this effect

A GSAP scramble text effect: characters cycle through random glyphs before settling into the real content. The demo is a studio page where decoding is the reveal: a three-line manifesto decodes on load, a client list decodes as it scrolls into view, a link row decodes on hover, and a phone number sits as noise until it is clicked.

Read the full effect overview

Each character resolves independently with configurable timing and direction. Cycling glyphs can use your accent colour while settled characters stay in ink. The line holds its spacing throughout the reveal, so the surrounding layout stays steady.

What's included

11 items
  • Four trigger modes: scroll, hover, click, and auto-play
  • Five decode directions: left-to-right, right-to-left, center-out, edges-in, and random
  • Configurable scramble speed with fast, normal, and slow presets
  • Custom character sets for the scramble animation
  • Per-character render mode with fixed-width cells: no line jitter, and the cycling glyphs can be coloured
  • Start-scrambled option for a phone number or email that decodes on request
  • ScrollTrigger integration with automatic viewport detection
  • Group mode for staggered multi-element reveals
  • Global replay control and start/complete custom events
  • Lightweight requestAnimationFrame implementation
  • Accessible: respects prefers-reduced-motion

Perfect for

5 use cases
  • Hero headline reveals and studio manifestos that decode line by line
  • Client, award or service lists that decode as users scroll
  • Navigation links that decode on hover
  • Phone numbers and email addresses revealed on click
  • Loading states and transition screens

How it works

2 sections

Characters cycle through your chosen glyphs and settle into the final text, following the direction and pace you choose. Trigger the reveal on load, scroll, hover or click; grouped text can arrive in sequence, and replay controls let visitors repeat it. GSAP coordinates playback, with optional ScrollTrigger activation as text enters view.

The reveal keeps word spacing and line breaks steady. Unresolved characters can carry an accent colour, making the transition from scrambled text to readable content easy to follow.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Text Scramble Decode opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add data attributes to text in your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: an element carrying data-scramble plus one trigger attribute. It reads the element's text content on load and writes it back as it decodes, so the element should contain plain text only (no nested markup). Wrap it in whatever you like.

What is only the demo: the studio page around it (.hero, .manifesto, .clients, .foot and everything in those blocks of style.css) is demonstration layout and can go. The page's ground, type and accent live in the :root tokens at the top of style.css.

CSS the effect depends on (the contract block in style.css, keep it):

  • [data-scramble-render="chars"] .scramble-word is display: inline-block; white-space: nowrap, so a split line still wraps at spaces and never inside a word.
  • [data-scramble-render="chars"] .scramble-char is display: inline-block; text-align: center. The script sets each cell's width in em after measuring it against your loaded font, so the line holds still while it decodes. Because the width is in em, a responsive font-size keeps working without a remeasure.
  • .scramble-char.is-scrambling and .scramble-char.is-pending are where the colour goes: the demo paints cycling glyphs in the accent and not-yet-started glyphs in a faint ink. Restyle them freely; the script only toggles the classes.
  • [data-scramble] { font-variant-numeric: tabular-nums; } keeps digits equal-width, which is what makes a phone number decode without drifting.

There is no .has-js pre-hide: without JavaScript every element shows its readable text.

Accessibility of a decoding headline: the changing glyphs would otherwise be read out one by one. Put the readable sentence in an aria-label on the parent (<h1 aria-label="...">) and aria-hidden="true" on each decoding span, as the demo does. For a link or button, put the readable text in aria-label on the element itself.

Triggers

Attribute Behavior
data-scramble-auto Decodes after load
data-scramble-scroll Decodes on viewport entry and resets above the trigger
data-scramble-hover Replays on pointer hover, keyboard focus, or touch
data-scramble-click Replays when the element is clicked
data-scramble-replay Button that replays every initialized scramble instance

Options

Attribute Values Default Description
data-scramble-speed fast, normal, slow normal Frame ranges used during decoding
data-scramble-direction left, right, center, edges, random random Character-resolution order
data-scramble-chars Any string Symbols Glyph set used while scrambling
data-scramble-delay Milliseconds 0 Initial auto-play or group delay
data-scramble-repeat Milliseconds 0 Delay after completion before auto replay
data-scramble-render text, chars text text rewrites the element's text each frame. chars splits it into fixed-width .scramble-char cells inside .scramble-word spans, toggles is-pending / is-scrambling on them, and picks each scramble glyph from the ones that fit the cell
data-scramble-start scrambled (readable) For hover and click elements: sit as noise from load until the trigger fires. A phone number or email revealed on request
data-scramble-status On any element Optional. The script writes Decoding or Resolved into it

In chars mode the cells are measured inside document.fonts.ready, and an auto-play element waits for that measurement before its delay starts, so the first frame already has its widths.

Accessibility

  • Hover triggers also respond to keyboard focus and touch.
  • Reduced motion leaves the original text visible and skips decoding.
  • For large animated headings, put the readable phrase in an aria-label on the parent and set the changing glyph span to aria-hidden="true". This prevents every random character from being announced.
  • Use a real <button> for click and replay controls.

Dependencies

  • GSAP 3.15.0+
  • ScrollTrigger when using scroll triggers

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

GSAP Text Animation: 6 Approaches and When to Use Each

Compare six GSAP text animations: split reveals, typewriter, scramble, glitch, scroll highlights and cursor reactions, with working code for each.

Using AI to Customize GSAP Effects

Use ChatGPT, Claude, and other AI assistants to customize, integrate, and debug GSAP Vault effects. Includes prompts and workflow tips.

Adding a Text Scramble Effect to WordPress

Add a simple text decode animation to your WordPress site using GSAP. Text appears scrambled and reveals on scroll - no plugin required.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.