SplitText Walkthrough

Опубликовано: 02 Май 2026
на канале: GSAP Learning

56,645

1.4k

Use SplitText to split an HTML element's text into individual characters, words, and/or lines to create gorgeous staggered animations.

It's highly configurable and smarter than other text splitting tools thanks to features like automatic screen reader accessibility, masking for reveal effects, responsive re-splitting, and much more.

Docs - https://gsap.com/docs/v3/Plugins/Spli...
Demos - https://codepen.io/collection/bNPJyv

00:00 - Intro
00:47 - Simple splitting demo
02:43 - Selecting Elements
03:55 - Stagger animations
05:45 - Handling font loading, onSplit callback
06:55 - Comparison with other text splitting libraries
08:22 - Handling text splitting responsively with autoSplit.
12:58 - Easy masking for reveal effects
13:41 - Handling screenreader accessibility
16:43 - Complex use cases, ignore and prepareText