Jump to content


1.9 Text Tweening

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



OK, I have an element I want to test the text tweening on.  I'm getting at it as so:


var experimentOneMainButton = $(':last-child p', masterContainer);


If I use experimentOneMainButton.text = 'some text'; all is good.  However, if I use:


TweenMax.to(experimentOneMainButton, 2, {text:"Close", ease:Linear.easeNone});


Nothing happens.  I'm confirming in the console that experimentOneMainButton is the element I'm needing.  Any ideas?  I can post the entire function if that helps?



Link to comment
Share on other sites

Ahh, ignore me, I was being crazy stupid.  The server hadn't updated. 

Link to comment
Share on other sites

Glad to hear you got it figured out. Thanks for the update.

Hope you enjoy it and are doing well.



Link to comment
Share on other sites

Well I'm having a bit of a problem too, I have split a text into div elements with text inside, and while I iterate through them and declare the text tween, the text doesn't change.


I'm including a codepen to show this: http://cdpn.io/xAbLh


Should I use a "label" tag for the tween to work or any element that receives text will do?



Link to comment
Share on other sites

Ah I see my mistake didn't know it wasn't included, thanks!

Link to comment
Share on other sites

While I managed to get the letters to change, they are just being replaced there no animation happening.


This might be due to the fact that I'm replacing one letter at a time? Does the plugin work better on a complete phrase or paragraph?


I have updated the codepen here: 

See the Pen xAbLh by netgfx (@netgfx) on CodePen



Link to comment
Share on other sites

Hi Michael,


I might be misunderstanding what you want to achieve, or maybe you aren't understanding what TextPlugin is supposed to do. 


For clarity, TextPlugin simply changes the text value of a DOM element to a new value, there isn't any animation from 1 character to the next. For instance if you tween an element that has the letter "a" in it to text:"z", it isn't going to go through all the letters in the alphabet over the duration of the tween. "a" will simply change to "z". 


See the Pen 62089edd8c9cd948864cd6f54e0f3235 by GreenSock (@GreenSock) on CodePen

See the Pen mscjD by GreenSock (@GreenSock) on CodePen


The purpose of this plugin is so that certain text values can be recorded at certain points in time in tweens and timelines making it easy to reverse animations or jump to specific times and be able to display the appropriate text. 


Let me know if this helps or if you still aren't getting the expected behavior from the plugin



  • Like 1
Link to comment
Share on other sites

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
  • Recently Browsing   0 members

    • No registered users viewing this page.