Chapter 377: SplitText

Core Idea

gsap.registerPlugin(SplitText)

Key Concepts

• Screen reader Accessibility* - Adds aria-label to the split element(s) and aria-hidden to the freshly-created line/word/character elements.
• Responsive re-splitting* - Avoid funky line breaks when resizing or when fonts load with autoSplit and onSplit(). Offers automatic cleanup and resuming of animations too!
• Slice right through nested elements* - Elements like <span>, <strong>, and <a> that span multiple lines are handled effortlessly with deepSlice so they don't stretch lines vertically.
• Masking* - Wrap characters, words or lines with an extra clipping element for easy mask/reveal effects.
• Integrates seamlessly with GSAP's context(), matchMedia() and useGSAP()
• Flexible targeting - Apply your own class names to characters, words, or lines. Append "++" to auto-increment them (e.g. word1, word2, etc.). Enable propIndex* to apply CSS variables like --word: 3.
• Ignore certain elements* - Perhaps you'd like to leave <sup> elements unsplit, for example.
• Supports emojis & more - SplitText does an excellent job with foreign characters too.

Code Examples

gsap.registerPlugin(SplitText)

• What it demonstrates: typical usage of SplitText in a GSAP animation.

Key Takeaways

1. Screen reader Accessibility* - Adds aria-label to the split element(s) and aria-hidden to the freshly-created line/word/character…
2. Responsive re-splitting* - Avoid funky line breaks when resizing or when fonts load with autoSplit and onSplit().
3. Slice right through nested elements* - Elements like <span>, <strong>, and <a> that span multiple lines are handled effortlessly…
4. Masking* - Wrap characters, words or lines with an extra clipping element for easy mask/reveal effects.
5. Integrates seamlessly with GSAP's context(),…

Connects To

• context(): see ch009 — gsap.context()
• matchMedia(): see ch022 — gsap.matchMedia()
• tween: related GSAP concept
• timeline: related GSAP concept