Change Text and Color using GSAP

[muxing1310]

Hi, GSAP

 

I am a new user of Greensock Forum.

 

While using GSAP, I have a problem.

 

I want to change the text and color when mouse hover:

 

for example: the original text is "RedApple", the color of "Red" is red, the color of "Apple" is white.

 

when user mouse over "Red", the text of "Apple" changes "Strawberry" and the red color spreads out.

I mean first the red color is "Red" and "RedS" and "RedSt" ... last "RedStrawberry"

 

when user mouse out "Red", the color and text reverse.

 

like when user mouse over "Apple", the text should be "WhiteApple"

and color: white -> "Apple" -> "eApple" -> "teApple" -> ... -> "WhiteApple"

and mouse out, it will reverse.

 

I was trying to make this animation, but failed.

 

I hope you can help me to make this wonderful.

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

One alternative would be the Text Plugin. Basically this replaces one string with another and at the same time you can animate the font color of the element. For the layout you can use a couple of inline elements like spans or <div> with a display: inline property. Then you can store the instance in a variable and play/reverse it on he different mouse events, like this:

var t = TweenLite.to("#myElement", 1, {text:"Strawberry", color:"#f00", ease:Linear.easeNone, paused:true, reversed:true});

$("#parent").hover(function(){

  t.play();

},function(){

  t.reverse();

});

Text Plugin Docs:

 

http://greensock.com/docs/#/HTML5/Plugins/TextPlugin/

 

You can see it here, feel free to fork and adapt it to your needs:

 

See the Pen jPRVjE by rhernando (@rhernando) on CodePen

 

Finally, please take a look at the following link. It's very important that you can provide a live reduced sample of your issues in order to get a good idea of the issues you're having and what exactly you're trying to achieve:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy Tweening!!

[Diaco]

How about this : 

See the Pen ZGZLEp by MAW (@MAW) on CodePen

[Rodrigo]

Ha!! you gotta love this mad geniuses

 

Nice Diaco!!!