SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format.
- 0:00 Intro
- 0:21 SplitText solves problems
- 2:01 Basic Split
- 3:34 Configuration options
- 6:35 Animation
Video Highlights
- 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
new SplitText("#myTextID"). - 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
Check out this Pen!
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
from()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 InertiaPlugin 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. To learn how to include SplitText into your project, see the GSAP install docs.
Demos
-
2
-
1
.jpg.c1693021788ceda64cca1ccf202d1f9c.jpg)
.jpg.ff34476864c104ec5ee04e7b2ce49902.jpg)
Recommended Comments
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now