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

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, this kind of character-level animation is exactly where GSAP shines—CSS can’t animate individual characters within a text element.

<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:

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)“
<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 support. For more on how scroll-triggered animations work under the hood, see our guide on animating on scroll.

Want More Control?

The full Text Scramble effect 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 ->

If you want to go further with text animations, the Split Text Reveal and 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.