Jump to content

Does using gsap impact pixi.js animation performance?


saman.rnr
 Share

Recommended Posts

Hi.

Thanks for your great forum!

I am working on an application which will be used to create online tutorial animations.

I have used React, pixi.js and GSAP timeline for making these animations. The app receives text or image elements from the server, it downloads animation data objects from the server in addition, then on client side, each text or sprite element adds to stage. each element has a react ref which is used to animate the element using GSAP tween and each tween adds to the stage timeline (I used Timeline because i need to control the animation progress and speed).

It works fine in most cases but sometimes it has high GPU memory usage and low performance in chrome specially on power saving mode.

I have two questions: 

1) Does GSAP tweens impact the Pixi animation performance comparing its own ticker system animations?

2) Is it possible to create similar timeline system using Pixi ticker or some other more performant methods (I think that ticker system works just with delta values for loop animations and is not useful for animations from a specific value (x, y, scale, color and etc.) to another in a defined duration (similar to tweens))?

Link to comment
Share on other sites

I just started added GSAP to a PIXI project yesterday and haven't noticed any performance issues so far.

So far I have used GSAP to tween PIXI.Sprite.scale and filter properties (BulgePinchFilter and ShockwaveFilter). Performance is same as before. Maybe some of the properties you are changing are accessors doing some extra work in the background?

Edited by SantosR
Link to comment
Share on other sites

Thanks santosR

I'm using inlet React pixi. can it be the reason?

It seems that you have used vanilla PIXI with GSAP in react. how did you do that? 🙄

I tried to do that at first but i didn't know how to use Ref in that way and pass it into tween (I mean use Ref inside PIXI Text element definition for example).

do you have any sample code?

Edited by saman.rnr
Link to comment
Share on other sites

Hi saman.rnr. 

I didn't use React at all, just PIXI with GSAP. I didn't to anything special when using gsap, a few lines so you can have an idea of what I used it for:
 

gsap.to(head, { x: endPosX, y: endPosY, duration: 0.8 });


 

const tl = gsap.timeline();
segments.forEach((segment: PIXI.Sprite) => {
	tl.to(segment.scale, { x: 0, y: 0, duration: 2, delay: -.3 });
});


 

this.customFilter = new PIXI.Filter(null, fragment, uniforms);
gsap.to(this.customFilter.uniforms, { uWave: 0, duration: 1 });




As you can see, I used GSAP to update a PIXI.Sprite's position, scale and even update uniforms in a Filter's shader, and it all behaved well. I did not notice any performance issues due to GSAP when tweening these properties.

I don't know how React PIXI is implemented, but my first guess would be that the properties you're tweening might be doing extra work behind the scenes.

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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