❮ Previous

GSAP TextPlugin (Text Replacement & Typing Effect)

  • TextPlugin allows you to smoothly replace and animate text content, enabling typing effects and dynamic UI text updates.

  • Introduction

    TextPlugin is a GSAP plugin that lets you animate text content itself, not its position or style.

    Instead of instantly changing text like this:

element.textContent = "Hello";

  • You can animate the text smoothly using GSAP TextPlugin.

    It is commonly used for:

    • Typing animations

    • Replacing headlines dynamically

    • Counters and stats

    • Interactive UI messages

    TextPlugin is provided by GreenSock GSAP.

  • Basic Concept

    Normally, text changes are instant.

    👉 TextPlugin:

    • Gradually replaces old text with new text

    • Can simulate typing or decoding

    • Works with timelines and ScrollTrigger

    Think of it as animated text replacement.

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


gsap.to(".text", {
  duration: 2,
  text: "Welcome to GSAP"
});

  • Parameters / Options

    OptionMeaningExample
    textFinal text content"Hello World"
    durationAnimation time2
    delimiterSplit character" "
    typeTyping style"diff"
    padSpacePreserve spacingtrue

Simple Text Replacement 

gsap.to("h1", {
  duration: 1.5,
  text: "New Heading Loaded"
});

Typing Effect 

gsap.to(".typing", {
  duration: 3,
  text: "Typing animation using GSAP"
});

Timeline Text Changes 

const tl = gsap.timeline();

tl.to(".msg", { text: "Loading..." })
  .to(".msg", { text: "Almost there..." }, "+=1")
  .to(".msg", { text: "Done!" });

Text Change on Scroll 

gsap.to(".headline", {
  text: "Scroll Activated Text",
  scrollTrigger: {
    trigger: ".headline",
    start: "top 70%"
  }
});

  • Best Practices

    • Use TextPlugin for dynamic messages

    • Combine with opacity or cursor animation

    • Keep text short for better UX

    • Use timelines for multiple replacements

  • Comparison

    PluginBest Use
    TextPluginText replacement / typing
    SplitTextLetter movement
    ScrambleTextHacker/glitch text
    CSS animationSimple fades

  • Quick Summary

    • TextPlugin animates text content

    • Perfect for typing & replacement

    • Premium GSAP plugin

    • Easy syntax and flexible

    • Great for UI messaging

❮ Previous