1.9 Text Tweening

[mrEmpty 0 Likes (Newbie)]

Hello.

 

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?

 

Cheers.

[mrEmpty 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

Hope you enjoy it and are doing well.

 

-carl

[Michael71 59 Likes (Contributor)]

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?

 

Thanks!

[Carl 9,066 Likes (Superhero)]

It looks like you weren't loading the plugin (it isn't in included in TweenMax.js)

 

I plugged this 

 

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/TextPlugin.min.js

 

into your example and all characters shifted to random characters.

[Michael71 59 Likes (Contributor)]

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

[Michael71 59 Likes (Contributor)]

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

 

Thanks.

[Carl 9,066 Likes (Superhero)]

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

 

-carl