Jump to content
GreenSock

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

TextPlugin

Sign in to follow this  

| GreenSock
66214

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
gsap.to(yourElement, {duration: 2, text: "This is the new text", ease: "none"});

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)
gsap.to(yourElement, {duration: 2, text: {value: "This is the new text", delimiter: " "}, ease: "none"});

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

  • Like 2
  • Thanks 2

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×