Jump to content
GreenSock

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

GreenSock Docs

TextPlugin

Description

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 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 or restart the tween, the text will be reverted.

Here is a simple example of replacing the text in yourElement:

  1. //replaces yourElement's text with "This is the new text" over the course of 2 seconds
  2. gsap.to(yourElement, {duration: 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:

  1. //replaces word-by-word because the delimiter is " " (a space)
  2. gsap.to(yourElement, {
  3. duration: 2,
  4. text: {
  5. value: "This is the new text",
  6. delimiter: " "
  7. },
  8. ease: "linear"
  9. });

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:

  1. //wraps the old text in and the new text in a
  2. gsap.to(yourElement, {
  3. duration: 2,
  4. text: {
  5. value: "This is the new text",
  6. newClass: "class2",
  7. oldClass: "class1"
  8. },
  9. ease: "Power2.easeIn"
  10. });

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:

  1. //GOOD:
  2. gsap.to(yourElement, {
  3. duration: 1,
  4. text: {
  5. value: "Your new text",
  6. oldClass: "class1",
  7. newClass: "class2",
  8. delimiter: " "
  9. }
  10. });
  11. //BAD:
  12. gsap.to(yourElement, {
  13. duration: 1,
  14. text: "Your new text",
  15. oldClass: "class1",
  16. newClass: "class2",
  17. delimiter: " "
  18. });

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:

  1. gsap.to(yourElement, {
  2. duration: 1,
  3. text: {
  4. value: "shorter new text",
  5. padSpace: true
  6. }
  7. });
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.
×