# 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.

Published 2026-01-18 by Jake. Canonical: https://gsapvault.com/blog/text-scramble-wordpress

---
The text scramble effect creates an eye-catching reveal where characters cycle through random symbols before decoding into readable text. It's one of the most popular [text animation techniques](/effects/text-decode) on modern websites, and you don't need a WordPress animation plugin to pull it off. Here's a basic version you can add to any WordPress site.

## What You'll Build

Text that starts scrambled and decodes when scrolled into view. Simple, one trigger mode, easy to implement.

[Live interactive demo](https://gsapvault.com/demos/text-decode/index.html)

## Step 1: Add GSAP

GSAP loads via CDN, so there's nothing to install. Use a plugin like "WPCode" or "Insert Headers and Footers" to add these scripts to your footer. If you're not sure [whether GSAP is the right choice vs pure CSS](/blog/gsap-vs-css-animations), this kind of character-level animation is exactly where GSAP shines—CSS can't animate individual characters within a text element.

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script>
```

## Step 2: Add the Effect Code

Add this JavaScript after the GSAP scripts:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  gsap.registerPlugin(ScrollTrigger);

  const chars = '!<>-_\\/[]{}—=+*^?#';

  document.querySelectorAll('.scramble').forEach(function(el) {
    const text = el.textContent;

    // Scramble initially
    el.textContent = text.split('').map(c =>
      c === ' ' ? ' ' : chars[Math.floor(Math.random() * chars.length)]
    ).join('');

    ScrollTrigger.create({
      trigger: el,
      start: 'top 85%',
      once: true,
      onEnter: function() {
        let frame = 0;
        const queue = text.split('').map((char, i) => ({
          to: char,
          start: Math.floor(Math.random() * 30),
          end: Math.floor(Math.random() * 30) + 30 + Math.floor(Math.random() * 30)
        }));

        function update() {
          let output = '';
          let done = 0;

          queue.forEach(function(item) {
            if (frame >= item.end) {
              output += item.to;
              done++;
            } else if (frame >= item.start) {
              output += chars[Math.floor(Math.random() * chars.length)];
            } else {
              output += chars[Math.floor(Math.random() * chars.length)];
            }
          });

          el.textContent = output;
          frame++;

          if (done < queue.length) {
            requestAnimationFrame(update);
          }
        }

        update();
      }
    });
  });
});
```

## Step 3: Apply the Class

Add the class `scramble` to any element in Gutenberg:

1. Select the block (Heading, Paragraph, etc.)
2. Open the "Advanced" panel in the sidebar
3. Add `scramble` to "Additional CSS class(es)"

```html
<h1 class="scramble">Your Heading Here</h1>
```

## That's It

Scroll down and your text will decode. This basic version handles scroll-triggered reveals with [reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) support. For more on how scroll-triggered animations work under the hood, see our guide on [animating on scroll](/blog/how-to-animate-on-scroll).

---

## Want More Control?

The [full Text Scramble effect](/effects/text-decode) includes features this basic version doesn't have:

- **5 decode directions** - left-to-right, right-to-left, center-out, edges-in, random
- **Speed presets** - fast, normal, slow via data attributes
- **Custom character sets** - binary, letters, symbols, or your own
- **Staggered groups** - multiple elements decode in sequence
- **Multiple triggers** - scroll, hover, click, or auto-play with repeat
- **Event callbacks** - `scramble:start` and `scramble:complete` events
- **Re-scramble on scroll back** - text scrambles again when scrolling up

[View the full effect with all options ->](/effects/text-decode)

If you want to go further with text animations, the [Split Text Reveal](/effects/split-text-reveal) and [Glitch Text](/effects/glitch-text) effects offer different approaches to animated typography. And if you'd rather use an AI assistant to help you customize any of these effects, check out our guide on [using AI to customize GSAP effects](/blog/using-ai-assistants-gsap-effects).

---

## Related Articles

- **[Animate on Scroll: 3 Approaches Compared](/blog/how-to-animate-on-scroll)** — Understand the three ways to trigger animations on scroll, from CSS to GSAP ScrollTrigger.
- **[GSAP vs CSS Animations: A Practical Guide](/blog/gsap-vs-css-animations)** — When to reach for GSAP versus sticking with CSS transitions and keyframes.
- **[Using AI to Customize GSAP Effects](/blog/using-ai-assistants-gsap-effects)** — Speed up your workflow by pasting effect code into ChatGPT or Claude for instant customization.