Jump to content
Search Community

Syntax for Color Tween on Text

celli test
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

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

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
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.
×
×
  • Create New...