Jump to content
Search Community

GSAP v3 PixiJS v5 PixiPlugin w/ Stagger Issue with Graphics Fill

jSwtch test
Moderator Tag

Recommended Posts

Hello!

 

I am having an isssue correctly understanding how the gsap stagger will work with respect to pixiplugin. As soon as I attempt to set the fill or line color of a graphics element I get an error, and the transition is to black.

 

I understand the timeline is running on an array - but I have tried running on individual elements - and I get the same result. I am hoping someone can help me understand the best approach to connect everything here.

 

Thanks

See the Pen poJmqva?editors=1011 by jswtch (@jswtch) on CodePen

Link to comment
Share on other sites

Hey jSwtch and welcome.

 

Something funny does seem to be going on. 30 out of 50 of the elements throw errors because of the fillColor and do weird flashing. Minimal repro:

const animateRectangleSet = (set) => {
  console.log(set)
  gsap.to([set.slice(0, 50)], {
    pixi: {
      fillColor: "#fff"
    }
  });
};

 

Link to comment
Share on other sites

I am also having an issue with the fill color changing with pixi graphics and pixiplugin as seen here: 

See the Pen LYVoaxJ by jswtch (@jswtch) on CodePen



Seems like the rectangle is working but not the circle?

 

EDIT: 

Quote

probably because rectangle is rendered with batch renderer and circle is not, because number of vertices too high. Modifying shape props is tricky. try "graphics.geometry.invalidate()" every frame for circle animation

 

Link to comment
Share on other sites

I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake

 

Quote

So I have a general question about performance and practicality -> I want to create geometric motion graphics similar to (see embedded video). I could do this with svg and gsap alone - but I thought I would get a performance boost for rendering the scene in PixiJS. 

 

I thought specifically that transitioning background color would be 'expensive' if done in the DOM directly instead of a canvas with webGL2.

 

I do not plan to have 100 000s of elements. Would this type of animation be best done in with PixiJS + tweening or just svg + tweening. 

 

 

Link to comment
Share on other sites

14 minutes ago, PointC said:

Not sure if it'll help but you could try tint instead of fillColor.

Just a thought. Happy tweening.

:)

 


this is likely good enough thanks! (https://pixijs.download/v5.0.0-alpha.2/docs/PIXI.Graphics.html)

 

 tint number

The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.

Default Value:
  • 0xFFFFFF
Link to comment
Share on other sites

2 hours ago, jSwtch said:

I had started a similar thread here (https://www.html5gamedevs.com/topic/45085-gsap-v3-pixijs-v5-pixiplugin-w-graphics-issue/) for a different reason. I was wondering if someone here could comment on this question though. @OSUblake

 

I would second everything Ivan said. It's really hard to estimate how well each medium (WebGL, canvas2D, SVG) will perform for animating graphics like that. I'm pretty sure canvas2d will be faster than SVG, but it's not the easiest thing to work with. Will Pixi be faster than canvas2D for an animation like that? I honestly don't know, but it will be much easier to create in Pixi.

 

 

  • Like 4
Link to comment
Share on other sites

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