Jump to content
Search Community

ColorPropsPlugin wit pixi tint property

smakinson 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

Is there a built in way to get the ColorPropsPlugin to hand back a number instead of rgb? See the codepen for an example of a quick fix that makes it tween with an extra function call. Click on the box to change the color. Also you will need to use a browser with webgl since there is a bug with the tint & canvas.


Also on a side note it seems to flash to white each time its clicked, which is not what I expect. That is not related to the ColorPropsPlugin, correct?

See the Pen zxEaPZ?editors=101 by anon (@anon) on CodePen

Link to comment
Share on other sites

Sorry about the delayed response - this one slipped through the cracks.

The problem had to do with the fact that Pixi was expecting the tint as a number, whereas ColorPropsPlugin always set it as an rgb(...) or rgba(...) string. Pixi just didn't know how to understand that. So I updated ColorPropsPlugin so that it now recognizes a "format" property that you can set to "number" if you want that behavior. So your tween would look like:

TweenMax.to(tintable, 0.5, {colorProps: {
    tint: Math.random() * 0xFFFFFF, format:"number"

See the attached updated plugin file. Does that work better for you?


  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

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...