Fill and line tween not working using gsap

[CamO]

Hey, I've been trying to change fill and line properties such as lineColor and lineWidth, when logging the object in the console it shows that the value have change but it does not rerender it and it shows the initial colors or width.

 

I tried using the new gsap syntax by using 

import PixiPlugin from "gsap/PixiPlugin";
gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);

 but it wasnt working for any tween with sub properties so i am using the old syntax, below is the code

 

const App =()=>{



function onClick()
{


  gsap.to(this.fill,1,{color:0x000000})
 
   //   gsap.set(this,1 {x:550,tint:0x9013FE, height:200})
   console.log(this)


}

}

return(
       <Stage 
        width={width}
        height={window.innerHeight*8.67/10}
        options={{ antialias: true, resolution:window.devicePixelRatio  || 1 , autoResize:true, backgroundColor: 0x000000, x:400, y:900 }}>
<Graphics
key={0}


interactive={true} 

      draw={graphics =>{

        graphics.lineStyle(2, 0xffffff, 1);
        graphics.beginFill(0xff00bb, 0.25);
        graphics.drawPolygon([ 150, 450, 450, 450, 450, 550,150, 550]);
        graphics.endFill();
       
graphics
   .on('mousedown', onClick)
    .on('touchstart', onClick)

 

      }
      }/>
</Stage>

)

}

export default App

 

I tried using tint but when duration >0 it changes into multiple colors and for the long run of this project i don't think it is efficient, finally as you can see i am using react

[ivan.popelyshev]

Hello and welcome to the forums!

Unfortunately, in this case I have no fast answer, you have to use a debugger.

I dont know how GSAP handles that "fill" thing. What I know is that if you chnage anything that was already drawn, "graphics.geometry.graphicsData[0].fillStyle" you have to call "graphics.geometry.invalidate()" afterwards, that way pixi will rebuild drawCalls when its time to render. You have to find in GSAP sources how that "fill" works.

"color", "tint".. yeah, interpolating tint linearly will get you strange colors. GSAPPlugin has special case for interpolating tint and you have to debug plugin to actually see what it assigns to tint!

Also it'll be nice if you specify which version of pixi do you use. We patch lines/fillls problems regularly. If you need to solve this right now, please make a full minimal demo on codepen/jsfiddle or a zip file - that will shorten the time you have to wait for someone to pick up issue. People usually respond to coffee-break issues faster than for half-of-hour   

Summary: use the sources, Luke!

Edited April 12, 2020 by ivan.popelyshev

[CamO]

Hi Ivan, due to gsap licensing policy I will be dropping their library and i will be using pixi-ease instead, thanks for the help thought, i appreciate it

 

[CamO]

by the way i used your proposition and it worked for fill, if its not asking for much could you provide your email, i have a matter that might interest you