GSAP SplitText
text splitting made simple
Master the SplitText plugin to break text into characters, words, and lines for stunning per-element animations. Now FREE in GSAP 3.13+, with responsive autoSplit and cinematic mask effects.
Getting Started with SplitText
SplitText is a GSAP plugin that breaks text into granular DOM elements—characters, words, or lines—so you can animate each piece individually. Since GSAP 3.13.0, it's completely free.
Text splits into chars, words, lines
JavaScript
gsap.registerPlugin(SplitText);
// Split into characters
const split = SplitText.create("#demo-basic-split", {
type: "chars"
});
// Animate each character
gsap.from(split.chars, {
opacity: 0,
y: 20,
stagger: 0.05,
duration: 0.6,
ease: "back.out"
});Key Takeaway
Use SplitText.create(target, vars) (recommended in GSAP 3.13+) or new SplitText(target, vars). Both work identically.
Character Animations
Per-character animations are the foundation of SplitText. Break text into individual characters and stagger them across time for fluid, eye-catching effects.
JavaScript
// Split text into characters
const split = SplitText.create("#target", {
type: "chars"
});
// Fade in with stagger
gsap.from(split.chars, {
opacity: 0,
y: 30,
stagger: 0.05,
duration: 0.6,
ease: "power2.out"
});
// Reset with split.revert() when doneWord Animations
Sometimes you want to animate at word-level instead of character-level. SplitText makes this just as easy, perfect for headlines and emphasis.
JavaScript
// Split into words
const split = SplitText.create("#target", {
type: "words"
});
// Slide each word in from the left
gsap.from(split.words, {
x: -100,
opacity: 0,
stagger: 0.08,
duration: 0.8,
ease: "power3.out"
});Line Animations
Line-level splitting is perfect for multi-line copy. Each line animates independently, creating a natural reading flow.
JavaScript
// Split into lines
const split = SplitText.create("#target", {
type: "lines"
});
// Slide lines up from bottom
gsap.from(split.lines, {
y: 40,
opacity: 0,
stagger: 0.1,
duration: 0.8,
ease: "power3.out"
});The mask Property NEW in 3.13
One of the most exciting new features in GSAP 3.13 is the mask property. It wraps each character or word in an overflow:hidden container, enabling cinematic reveal effects.
Without Mask
With Mask (3.13+)
JavaScript
// Split with mask for reveal effects
const split = SplitText.create("#target", {
type: "words",
mask: "words" // NEW: Creates overflow:hidden wrapper
});
// Words now reveal from left
gsap.from(split.words, {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.8,
ease: "power3.out"
});Why Use Mask?
The mask property prevents text from extending beyond its container during animations. Perfect for smooth reveals and professional-looking effects without overflow issues.
autoSplit for Responsive Design NEW in 3.13
Text wraps differently on desktop vs. mobile. The autoSplit property automatically re-splits text when the container resizes, keeping your animations responsive.
JavaScript
// Enable autoSplit for responsive text breaking
const split = SplitText.create("#target", {
type: "lines",
autoSplit: true // Re-splits on resize
});
// Animate normally
gsap.from(split.lines, {
y: 30,
opacity: 0,
stagger: 0.1,
duration: 0.6
});
// Split updates automatically as container resizesPro Tip
Use autoSplit with responsive container widths. Perfect for paragraphs and multi-line headings that reflow on mobile. Always test across breakpoints!
ScrollTrigger Integration
SplitText shines with ScrollTrigger. Split your text once, then trigger staggered animations as elements scroll into view for maximum impact.
This text will animate when you scroll down. Each character fades in with a stagger, creating a smooth reveal effect triggered by ScrollTrigger.
JavaScript
gsap.registerPlugin(SplitText, ScrollTrigger);
const split = SplitText.create("#target", {
type: "chars"
});
gsap.from(split.chars, {
opacity: 0,
y: 20,
stagger: 0.05,
duration: 0.6,
scrollTrigger: {
trigger: "#target",
start: "top 80%",
markers: false
}
});Accessibility Best Practices
SplitText fragments the DOM, which can break screen reader access. Use aria-label to preserve the original text for assistive technologies.
❌ Without aria-label
<h2 id="heading">
Split this text
</h2>
// Screen readers see:
// "S p l i t t h i s t e x t"✓ With aria-label
<h2 id="heading"
aria-label="Split this text">
Split this text
</h2>
// Screen readers see:
// "Split this text"HTML + JavaScript
<!-- Add aria-label BEFORE splitting -->
<h2 id="headline" aria-label="Welcome to the site">
Welcome to the site
</h2>
<script>
// Now split—aria-label is preserved
const split = SplitText.create("#headline", {
type: "chars"
});
gsap.from(split.chars, {
opacity: 0,
y: 20,
stagger: 0.05,
duration: 0.6
});
</script>Accessibility Guidelines
- Always use
aria-labelon the parent element - Respect
prefers-reduced-motionmedia query - Test with screen readers (NVDA, JAWS, VoiceOver)
- Maintain semantic HTML (use <h1>–<h6>, <p>, etc.)
- Use
split.revert()to clean up when done
SplitText API Reference
SplitText.create(target, vars) Static Method (RECOMMENDED)
The modern way to create a SplitText instance. Equivalent to new SplitText() but recommended for consistency.
const split = SplitText.create("#target", {
type: "chars",
charsClass: "char",
wordsClass: "word",
linesClass: "line"
});| Property | Type | Description | Default |
|---|---|---|---|
type |
String |
Split method: "chars", "words", "lines" or combinations like "chars,words" | "chars" |
mask |
String |
NEW: "chars" or "words" to wrap each element in overflow:hidden. Great for reveal effects. | false |
autoSplit |
Boolean |
NEW: Auto-resplit when container resizes. Essential for responsive designs. | false |
charsClass |
String |
CSS class applied to each character element | "char" |
wordsClass |
String |
CSS class applied to each word element | "word" |
linesClass |
String |
CSS class applied to each line element | "line" |
reduceWhiteSpace |
Boolean |
Collapses multiple spaces into single spaces | true |
Methods
split.chars
Array of character elements (if type includes "chars")
split.words
Array of word elements (if type includes "words")
split.lines
Array of line elements (if type includes "lines")
split.revert()
Reverts the DOM back to original state, cleaning up all split elements. Always call this when done!
Best Practices
✓ Always Clean Up with revert()
Call split.revert() when your animation is done. This restores the original DOM and prevents memory leaks.
✓ Preserve Accessibility with aria-label
Add aria-label to the parent element BEFORE splitting. Screen readers will announce the full text.
✓ Pair with ScrollTrigger for Impact
Trigger SplitText animations on scroll for maximum impact. Users remember entrance animations.
✓ Use mask Property for Cinematic Effects
The mask property (NEW 3.13) creates overflow:hidden wrappers for polished reveal animations.
✓ Respect prefers-reduced-motion
Check for prefers-reduced-motion and disable or simplify animations for users who prefer less motion.
✓ Test with autoSplit Across Breakpoints
Use autoSplit: true and test on mobile, tablet, and desktop to ensure smooth line breaks.
Frequently Asked Questions
SplitText.create() is the recommended static method as of GSAP 3.13+, while new SplitText() is the constructor approach. Use .create() for consistency with modern GSAP patterns, but either will work fine.
type: "chars,words,lines". The result will have .chars, .words, and .lines arrays you can animate independently.
mask, characters/words can move freely and potentially overflow their container. With mask: "words" or mask: "chars", each element gets wrapped in an overflow:hidden container, creating cinematic reveal effects.
autoSplit: true when creating your split. The plugin will automatically re-split the text whenever the container's width changes, ensuring your line breaks stay correct across responsive breakpoints.
aria-label="original text" to the parent element BEFORE you call SplitText.create(). Screen readers will announce the aria-label instead of reading individual characters.
split.revert() when you're done with the animation, especially if you're creating multiple splits or re-splitting the same element. This cleans up the DOM and prevents memory leaks. For single animations on page load, it's less critical but still a good practice.
Related Guides
GSAP Text Animations
Master typewriter, scramble, wave, and other text effects. Practical patterns for engaging headlines.
Explore EffectsGSAP ScrollTrigger Guide
Trigger animations on scroll. Perfect paired with SplitText for entrance effects.
Learn ScrollTriggerGSAP Ease Guide
Understand easing functions. Pair with SplitText stagger for natural motion.
Explore EasesGSAP Tutorial
Start from the basics. Learn timelines, tweens, and plugins from scratch.
Start LearningReady to Master SplitText?
You now have everything you need to create stunning per-character and per-word animations. Start building, experiment with effects, and level up your animations today.