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});

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

Get GSAP

Version: 1.20.4 updated 2018-02-15

Core

    Extras

      Plugins

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

        Help support GreenSock by becoming a member

        Join Club GreenSock