Next ❯

GSAP SplitText Plugin (Text Animation Made Easy)

  • SplitText lets you break text into characters, words, or lines and animate them easily using GSAP.

  • Introduction

    SplitText is a GSAP plugin that allows you to split text into characters, words, or lines so you can animate them individually.

    It is commonly used for:

    • Hero section text animations

    • Typography-based websites

    • Headline reveals

    • Creative UI transitions

    SplitText is a premium plugin provided by GreenSock GSAP.

  • Basic Concept

    Normally, text is a single element and cannot be animated letter by letter.

    👉 SplitText solves this by:

    • Wrapping each character/word/line in a <span>

    • Giving you full control over each part

    • Letting GSAP animate them individually

    Think of it as breaking text into animation-ready pieces.

nstallation / Setup 

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

Basic Syntax 

const split = new SplitText(".title", { type: "chars" });

gsap.from(split.chars, {
  y: 50,
  opacity: 0,
  stagger: 0.05
});

  • Parameters / Options

    OptionMeaningExample
    typeHow to split text"chars, words, lines"
    charsArray of characterssplit.chars
    wordsArray of wordssplit.words
    linesArray of linessplit.lines
    revert()Restore original textsplit.revert()

Character Animation 

const split = new SplitText("h1", { type: "chars" });

gsap.from(split.chars, {
  y: 80,
  opacity: 0,
  stagger: 0.04,
  ease: "power4.out"
});

Word-by-Word Animation 

const split = new SplitText(".text", { type: "words" });

gsap.from(split.words, {
  opacity: 0,
  y: 20,
  stagger: 0.1
});

Line Reveal Animation 

const split = new SplitText(".headline", { type: "lines" });

gsap.from(split.lines, {
  yPercent: 100,
  stagger: 0.2
});

Scroll-Based Text Animation 

const split = new SplitText(".title", { type: "chars" });

gsap.from(split.chars, {
  opacity: 0,
  y: 40,
  stagger: 0.05,
  scrollTrigger: {
    trigger: ".title",
    start: "top 80%"
  }
});

  • Best Practices

    • Use chars for short headlines

    • Use words/lines for paragraphs

    • Always revert before page destroy

    • Combine with timelines for smooth reveals

  • Comparison

    MethodUse Case
    SplitTextAdvanced text animation
    CSS animationLimited control
    Letter-spacing tricksHacky
    LottiePre-rendered

  • Quick Summary

    • SplitText breaks text into pieces

    • Animate characters, words, or lines

    • Perfect for typography animations

    • Premium GSAP plugin

    • Works with ScrollTrigger & timelines

Next ❯