❮ Previous Next ❯

GSAP ScrambleText Plugin (Hacker-Style Text Animation)

  • ScrambleTextPlugin lets you animate text with random characters that resolve into readable text, perfect for hacker and futuristic UI effects.

  • Introduction

    ScrambleTextPlugin is a GSAP plugin that creates a scrambled / glitch / hacker-style text animation, where random characters animate and finally reveal real text.

    It is commonly used for:

    • Hacker or cyber-themed websites

    • Loading text effects

    • Call-to-action highlights

    • Futuristic UI animations

    ScrambleText is a premium plugin from GreenSock GSAP.

  • Basic Concept

    Instead of splitting text into characters (like SplitText), ScrambleText:

    • Replaces text with random characters

    • Gradually resolves them into final readable text

    • Animates the content, not position

    👉 Think of it as “text decoding” animation.

Installation / Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrambleTextPlugin.min.js"></script>
gsap.registerPlugin(ScrambleTextPlugin);

Basic Syntax 

gsap.to(".text", {
  duration: 2,
  scrambleText: "HELLO WORLD"
});

  • Parameters / Options

    OptionMeaningExample
    scrambleTextFinal text"WELCOME"
    charsCharacters used"0123456789"
    speedScramble speed0.5
    revealDelayDelay before reveal0.5
    tweenLengthAnimation smoothnesstrue

Basic Hacker Text Effect 

gsap.to(".title", {
  duration: 1.5,
  scrambleText: "ACCESS GRANTED"
});

Custom Characters 

gsap.to(".text", {
  scrambleText: {
    text: "SYSTEM ONLINE",
    chars: "01",
    speed: 0.4
  }
});

Hover Scramble Effect 

const el = document.querySelector(".btn");

el.addEventListener("mouseenter", () => {
  gsap.to(el, { scrambleText: "CLICK ME" });
});

Scramble on Scroll 

gsap.to(".headline", {
  scrambleText: "WELCOME TO THE FUTURE",
  scrollTrigger: {
    trigger: ".headline",
    start: "top 80%"
  }
});

  • Best Practices

    • Use ScrambleText for headlines & CTAs

    • Keep text short and impactful

    • Customize characters for theme

    • Combine with opacity or scale animations

  • Comparison

    PluginBest For
    ScrambleTextHacker / glitch text
    SplitTextLetter-by-letter motion
    CSS animationSimple fades
    LottiePre-rendered effects

  • Quick Summary

    • ScrambleText animates text content

    • Creates hacker / futuristic effects

    • Premium GSAP plugin

    • Easy to use and customize

    • Perfect for short, impactful text

❮ Previous Next ❯