Jump to content
Search Community

Handling low power mode when using gsap as ticker director with pixi

Ilja test
Moderator Tag

Recommended Posts

I am using gsap as ticker director for pixi js, as per this example https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js
I noticed that when ios device is in low power mode fps drops to 30. After some research I believe it is normal behaviour as it is related to requestAnimationFrame throttling, however animations in my app look very very choppy.

In  vanilla pixi, we have delta exposed to make animations faster i.e.

apixiApp.ticker.add((delta) => {
   container.rotation -= 0.01 * delta;
});

 

Is there something equivalent I could add to gsap's ticker to ensure animations are sped up when fps is throttled? 

Here is full code of how gsap updates pixi ticker

pixiApp.ticker.stop();
 
gsap.ticker.add(() => {
pixiApp.ticker.update();
});
Link to comment
Share on other sites

Hey Ilja and welcome to the GreenSock forums.

 

The two code blocks that you shared are not equivalent. The first affects the value of a particular property. The second is telling all of Pixi to update. There's no way that you can make GSAP's ticker run more often than when the browser allows RAF calls. However you can affect particular properties inside of GSAP's ticker like you are in the first code block. Does that make sense?

 

Perhaps it'd be helpful if you shared a minimal demo of what you're trying to accomplish so that we can provide more pointed feedback/alternatives.

Link to comment
Share on other sites

Hey @ZachSaucier

Sorry for confusion. I'll try to explain it better. First block is taken as an example of pure pixi implementation for rotation animation. I am not actually using it, however it showcases usage of "delta" (more on this latter).
Second block where gsap drives pixi's ticker is what I use, it works great (I then use normal tweens to animate pixi objects).

Issues start in low power mode on phones, since we are now operating in 30fps, as RAF is throttled. That first example looks more or less ok, I assume due to delta usage as its value is 1 at 60fps and 2 at 30fps, hence at 30fps it is animating faster sort of compensating for lower fps.

My question is, can I do something like that in my gsap tweens or that second code example, to also speed up animations and "compensate" for 30fps drop? Both pixi and gsap in my application are set to target 60fps atm.

Link to comment
Share on other sites

1 hour ago, Ilja said:

Is there something equivalent I could add to gsap's ticker to ensure animations are sped up when fps is throttled? 

Perhaps this would help: https://greensock.com/docs/v3/GSAP/gsap.ticker#deltaRatio

 

15 minutes ago, Ilja said:

can I do something like that in my gsap tweens or that second code example, to also speed up animations and "compensate" for 30fps drop? Both pixi and gsap in my application are set to target 60fps atm.

I'm a bit confused because GSAP is time-based, not tick-based in terms of how it interpolates, so if you're doing regular GSAP animations you should never have to worry about it - they'll move at the same rate regardless of the FPS. That's a very good thing - purely tick-based animations (like if you add a certain amount on each tick) will speed up and slow down based on FPS, leading to very different timing depending on the device & load. 

 

Like @ZachSaucier said, if you need anymore help it'd sure help to see a minimal demo :)

  • Like 2
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...