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

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.

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.


  • Like 2
  • Thanks 1

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

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock

User Feedback

Recommended Comments

I litterally just spent about 40 minutes doing (see attached image) and came here looking for easing effects and ran into this video lmao!!! OH THE IRONY!!! And the sddest part, it doesnt even get close to looking as nice as the demo ones hahahahaha


At least now I know!


Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now