Jump to content

Fill and line tween not working using gsap


Recommended Posts

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";

 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.set(this,1 {x:550,tint:0x9013FE, height:200})



        options={{ antialias: true, resolution:window.devicePixelRatio  || 1 , autoResize:true, backgroundColor: 0x000000, x:400, y:900 }}>


      draw={graphics =>{

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





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

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...