ColorPropsPlugin wit pixi tint property

[smakinson 0 Likes (Newbie)]

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

[GreenSock 13,314 Likes (Superhero)]

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?

ColorPropsPlugin_1.3.0.zip

[smakinson 0 Likes (Newbie)]

That is perfect, thanks!!!

[GreenSock 13,314 Likes (Superhero)]

This is baked into the GSAP 1.16.0 release, FYI

[smakinson 0 Likes (Newbie)]

Thanks!!