Does using gsap impact pixi.js animation performance?

[saman.rnr]

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))?

[SantosR]

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 November 17, 2021 by SantosR

[saman.rnr]

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 November 17, 2021 by saman.rnr

[SantosR]

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.