Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

TextPlugin

Sign in to follow this  

| GreenSock
55493

Tweens the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted. Here is a simple example of replacing the text in yourElement:

//replaces yourElement's text with "This is the new text" over the course of 2 seconds
TweenLite.to(yourElement, 2, {text:"This is the new text", ease:Linear.easeNone});

If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this:

//replaces word-by-word because the delimiter is " " (a space)
TweenLite.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone});

You can even add a new css class to the new text as it comes in. Learn more in the TextPlugin documentation.

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

Join the Club
×