Resources
Copied to clipboard

Scramble Text Animation

Hover
Code
Cursor hovered on a button and causing a text scramble animation

About This Resource

GSAP empowers us to build all kinds of cool interactions. With its ScrambleText plugin, we can add a unique twist to button animations. This solution brings a fun, glitchy effect to your buttons. This animation works best with monospaced typefaces (like Monotype) due to their consistent character width. Using other fonts may cause the text to shift in width during the animation.

Resource Documentation

Core (Essential for Functionality)

Add the following script before the closing body tag.

No items found.

Customization (Optional Enhancements)

No items found.

Use This Solution Multiple Times on a Page

Copy Element

Step 1 - Install GSAP Library

Go to settings -> GSAP -> enable GSAP -> enable ScrambleText

%%spacer-2rem%%

Visual Guide of installing GSAP

%%resource_divider%%

Step 2 - Add The Following Code

Paste the following code in the before </body> tag

<script>
  gsap.registerPlugin(ScrambleTextPlugin);

  // ==== CONFIGURABLE SETTINGS ====
  const direction = "ltr";
  const duration = 0.8;
  const ease = "sine.in";
  const speed = 2;
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const oldClass = "";
  const newTextAfterScramble = "";
  // =================================

  document.querySelectorAll('[pro-text-animate="trigger"]').forEach((button) => {
    const target = button.querySelector('[pro-text-animate="target"]');
    const originalText = target.textContent;
    let currentTween = null;
    let isHovered = false;

    const applyFixedWidth = () => {
      const currentText = target.textContent;
      target.textContent = originalText;

      button.style.width = 'auto';
      const newWidth = button.offsetWidth + "px";
      button.style.width = newWidth;

      target.textContent = currentText;
    };

    const scramble = (newText, isHoverIn) => {
      if (currentTween) currentTween.kill();

      let rightToLeft = false;
      if (direction === "combine") {
        rightToLeft = !isHoverIn;
      }

      const scrambleConfig = {
        text: newText === "" ? originalText : newText,
        speed,
        chars,
        rightToLeft
      };

      if (oldClass !== "") {
        scrambleConfig.oldClass = oldClass;
      }

      currentTween = gsap.to(target, {
        duration,
        ease,
        scrambleText: scrambleConfig,
        onComplete: () => currentTween = null
      });
    };

    if (document.fonts) {
      document.fonts.ready.then(applyFixedWidth);
    } else {
      window.addEventListener("load", applyFixedWidth);
    }

    window.addEventListener("resize", applyFixedWidth);

    button.addEventListener("mouseenter", () => {
      if (!isHovered) {
        isHovered = true;
        scramble(newTextAfterScramble, true);
      }
    });

    button.addEventListener("mouseleave", () => {
      if (isHovered) {
        isHovered = false;
        scramble(originalText, false);
      }
    });
  });
</script>

%%resource_divider%%

Step 3 - Define Your Elements

3.1 - Define Your Trigger

%%spacer-2rem%%

Add the following attribute to the element you want to use as the hover trigger.

%%resource_divider-small%%

Name
pro-text-animate
Value
trigger

%%spacer-2rem%%

Visual guide on adding pro-text-animate="trigger" attribute

%%spacer-3rem%%

3.2 - Define Your Target

%%spacer-2rem%%

Add the following attribute to the child text element you want to animate when the trigger is activated.

%%resource_divider-small%%

Name
pro-text-animate
Value
target

%%spacer-2rem%%

Visual guide on adding pro-text-animate="target" attribute

%%resource_divider%%

Step 4 - Customization

// ==== CONFIGURABLE SETTINGS ====
const direction = "ltr";
const duration = 0.8;
const ease = "sine.in";
const speed = 2;
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const oldClass = "";
const newTextAfterScramble = "";
// =================================

%%spacer-3rem%%

4.1 - Direction

%%spacer-2rem%%

const direction = "ltr";

%%spacer-2rem%%

Sets the animation direction. Use 'ltr' for a left-to-right animation, or 'combine' if you want the animation to go left-to-right on hover in and right-to-left on hover out.

%%spacer-3rem%%

4.2 - Duration

%%spacer-2rem%%

const duration = 0.8;

%%spacer-2rem%%

Defines how long the scramble animation lasts (in seconds). Lower values make it faster.

%%spacer-3rem%%

4.3 - Ease

%%spacer-2rem%%

const ease = "sine.in";

%%spacer-2rem%%

Controls the easing style of the animation. You can use any GSAP-compatible easing string.

%%spacer-3rem%%

4.4 - Speed

%%spacer-2rem%%

const speed = 2;

%%spacer-2rem%%

Adjusts how quickly characters cycle during the scramble. Higher values = more rapid changes.

%%spacer-3rem%%

4.5 - Chars

%%spacer-2rem%%

chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

%%spacer-2rem%%

Sets the pool of characters used during scrambling. Customize it to include symbols, numbers, etc.

%%spacer-3rem%%

4.6 - Old Class

%%spacer-2rem%%

const oldClass = "";

%%spacer-2rem%%

Adds a different style to animated characters, useful for the in-between state. Use the code below to apply custom styling or leave it blank if you dont need any custom styles in between.

%%spacer-2rem%%

Paste the following code inside </head> tag

<style>
.scrambling {
	color: white;
}
</style>

%%spacer-2rem%%

Then add the scrambling class here

%%spacer-2rem%%

const oldClass = "scrambling";

%%spacer-3rem%%

4.7 - New Text After Scramble

%%spacer-2rem%%

const newTextAfterScramble = "";

%%spacer-2rem%%

Replaces the final unscrambled text with new content. Leave empty to use the existing text. Make sure the new text isn’t longer than the original to avoid overflow.

%%spacer-2rem%%

const newTextAfterScramble = "ENJOYED THE DOC?";

%%resource_divider%%

To learn more about GSAP ScrambleText click here✌

Share This Resource

Resource Examples

Example 1 - Direction Combine🔥

Example 2 - Direction LTR With Text Change