GreenSock Docs (HTML5/JS)

TextPlugin

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 delimiternewClass, 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}});
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.

Get GSAP

Version: 1.20.4 updated 2018-02-15

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock