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});
Sometimes it's useful to have the new text differentiated visually from the old text, so TextPlugin allows you to define a css class to the new and/or old content, like this:
//wraps the old text in and the new text in a
TweenLite.to(yourElement, 2, {text:{value:"This is the new text", newClass:"class2", oldClass:"class1"}, ease:Power2.easeIn});
As indicated, defining a newClass and/or oldClass will result in wrapping a <span> tag around the associated text.
The delimiter, newClass, and oldClass special properties are all completely optional. If you use them, make sure you put them inside their own object, not inside the main vars object, like this:
//GOOD:
TweenLite.to(yourElement, 1, {text:{value:"Your new text", oldClass:"class1", newClass:"class2", delimiter:" "}});
//BAD:
TweenLite.to(yourElement, 1, {text:"Your new text", oldClass:"class1", newClass:"class2", delimiter:" "});
If the new text is shorter than the old text, it can sometimes be useful to pad the trailing space with non-breaking space HTML characters so that the old text doesn't collapse. If that's the effect you want, set the padSpace to true inside the text object like this:
TweenLite.to(yourElement, 1, {text:{value:"shorter new text", padSpace:true}});