HTML5 / JS

Flash

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 secondsTweenLite.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:

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:

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.

“ I am more and more amazed every day, and very glad that I decided to get a business license. ”

LilaQ

“ If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with. ”

Thomas Summerall

“ I think I love GreenSock as much as bacon. ”

Nick Zwinggi

“ With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it! ”

Tim Jaramillo

“ The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested. ”

Chrysto Dimchev

“ No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s ”

Robert Anthony

“ GSAP is just miles and miles ahead of any animation library out there. Great work! ”

Adam Alicki

“ Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it. ”

Tristan Mugford, @tmugford

“ I’ve long felt like GSAP is the best kept secret in JavaScript. ”

John Polacek

Thanks for signing up!

Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.