- 0:00 Intro
- 0:21 SplitText solves problems
- 2:01 Basic Split
- 3:34 Configuration options
- 6:35 Animation
- SplitText purposefully uses divs instead of spans to maximize compatibility in a wide range of browsers for numerous animation effects
Splitting text into characters, words and lines is a simple as
- Each split text animation element can have its position set as relative or absolute. When you split using position:"relative" text will be able to break and wrap naturally as the parent element changes size. When using position:"absolute" text will not wrap after it is split but animation performance may be better in some situations.
- Each SplitText objects stores arrays of all the split elements. For instance mySplitText.words would return an array of all the divs that wrap each word.
- SplitText can be reverted to its pre-split state using the revert() method.
- Animating text that has been split is dead simple using GSAP.
Basic Character Animation with SplitText
View the JS panel in the Codepen demo above to see how easy it is to:
- Split text into words and characters.
Pass the chars array into a TweenMax
staggerFrom()tween for animation.
- Revert the text back to its pre-split state when you are done animating.
Additional features and notes
- You can specify a new class to be added to each split element and also add an auto-incrementing class like .word1, .word2, .word3 etc. View demo
- You don't have to manually insert <br>tags, SplitText honors natural line breaks.
- SplitText doesn't force non-breaking spaces into the divs like many other solutions on the web do.
- SplitText is not designed to work with SVG <text> nodes.
- Learn more in our detailed SplitText API documentation.
Please visit our SplitText Codepen Collection for more demos of SplitText in action.
Where can I get it?
SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools like ThrowPropsPlugin as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible.