Pixi.js RGB color transform with GSAP 3.0

[Jason Sturges]

Not sure I follow how to shift between colors with GSAP 3.0 using RGB values in Pixi.js

 

Whether I use tintor my color property to change color, it tweens the RGB hex value as a single integer, creating a wobbly flashing transition of colors.

 

 

Code:

import * as PIXI from "pixi.js";
import { Power4, TimelineMax } from "gsap"; 
import PixiPlugin from "gsap/PixiPlugin";

PixiPlugin.registerPIXI(PIXI);

// ...

this._tween = new TimelineMax({ repeat: -1 })
  .to(this, 1, {
    color: 0xffff00,
    ease: Power4.easeIn
  });

Seems like GSAP 3.0 relies on auto-detection of color properties instead of previous plugins, like color transform or color props plugins.

 

Is there a trick, or some way I can pass a custom function as frame handler to the tween function?

[GreenSock]

It looks like you just forgot to wrap your stuff in a pixi:{} object so that it taps into PixiPlugin

 

Does that solves things for you? If not, please provide a reduced test case in codepen or jsfiddle or something like that and we'd be happy to take a peek. 

[GreenSock]

Oh, and don't forget to register the PixiPlugin. 

 

import * as PIXI from "pixi.js";
import gsap from "gsap"; 
import PixiPlugin from "gsap/PixiPlugin";

gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);

this._tween = gsap.timeline({ repeat: -1 })
  .to(this, {
    pixi: {
    	tint: 0xffff00
    },
    duration: 1,
    ease: "power4.in"
  });

 

[Jason Sturges]

@GreenSock Excellent!  Thank you, that was it!