GSAP SplitText Plugin Overview

The SplitText plugin is a powerful tool from GSAP (GreenSock Animation Platform) that helps you break down text into smaller parts — like lines, words, or characters. This is extremely helpful when you want to animate individual elements of your text, such as having each word fly in separately or each letter fade in one after another.

This kind of effect is especially useful for creating modern, engaging UI/UX experiences — think landing pages, hero sections, or any content where attention to detail matters. With SplitText, you get fine-grained control over your animations that would be very tedious to do manually.

Here’s a simple example of how you can use the plugin to animate a heading. We'll split it into words and chars (characters), then animate each character to slide in from the bottom with a fading effect.

// 1. Register the plugin
gsap.registerPlugin(SplitText);

// 2. Split the heading text into words and characters
const headingSplit = SplitText.create("h1", {
  type: "words, chars",
});

// 3. Animate each character individually
gsap.from(headingSplit.chars, {
  y: 50,
  opacity: 0,
  stagger: 0.05,
  ease: "back.out(1.7)"
});

Important Note: Always ensure the element you're splitting (like h1 or p) is already visible and present in the DOM when the SplitText function runs. Otherwise, the plugin may not work as expected.

SplitText doesn’t ship with GSAP by default — it’s a paid plugin offered through GreenSock’s Club. You’ll need a membership to use it in production, but you can try it locally for learning and demos.