Jump to content


Change Text and Color using GSAP

Moderator Tag

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



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.

Link to comment
Share on other sites

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});






Text Plugin Docs:




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:




Happy Tweening!!

  • Like 5
Link to comment
Share on other sites

Ha!! you gotta love this mad geniuses


Nice Diaco!!!

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.