Syntax for Color Tween on Text

[celli]

Hi,

 

There must be some special syntax or something I am missing for this simple text color tween. I can get almost any other property to animate, but not the text color... see codePen to see what I mean. I also tried it with the color Props Plugin, but I still can't seem to get simple text to change color on hover...

See the Pen xbPwQm by celli (@celli) on CodePen

[Jonathan]

Your code was right.. Looks like you pasted the full html script tag inside the codepen JS panel script input field.

 

Try this:

 

See the Pen yyPYmK by jonathan (@jonathan) on CodePen

:

// BAD - You had this in codepen JS panel script input
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"/></script>

// GOOD - but it needs to be without the script tag
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

:

Does that help?

[celli]

Yes, that does work! Silly mistake, thanks! Now I have to figure out why its not working in my project

[celli]

I see why actually. Apparently this particular property does not work locally... I put the files on a web server, and it works beautifully. Is that typical ? The other Tweens work fine locally...

[OSUblake]

You should always use a server when developing. Running a webpage locally might block some JavaScript due to things like security policies, and your file paths might be incorrect.

 

I would highly recommend using BrowserSync whenever you are developing, even if you use another server. Whenever you make changes to your files, it will refresh your browser and other devices you have synced, kind of like CodePen.

[celli]

Thanks, I will try BrowserSync!