Jump to content

Deadlines are looming. You've got to deliver something that looks amazing, packed with lots of whiz-bang effects that run smoothly on various machines. No time to reinvent the wheel. You need a reliable tool set that helps you live up to your reputation as a coding Rock Star.

SplitText Text Animation

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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 IE8. 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.

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 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.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.