remiX_ZA

Yeah, will try a few options. So the animations were "paused" due to lagSmoothing being enabled and not touched with it's defaults (500, 33 I think?). Disabling it then prevented them from being "paused" upon switching tabs. It won't be an issue if setting progress() on tick update manually I thought it could possibly be used many times, disabling it and then enabling it again. But I don't think that's the intended use case for it I made sense of it when messing around with the CodePen in OP, going higher and lower values to see what happens. So just want GSAP to prioritize timing upon rotations, as some devices are low end CPUs and it takes a while to re-render the PIXI canvas etc. Don't worry you've helped me more than enough Thanks!

Yeah this might be the best. I originally was going with something similar but thought there might be an easier way on the engine directly. So would the tween have to start and then be paused straight after and then progress will move it forward on every tick? true UPDATE So disabling lagSmoothing is probably not going to be the best or work overall. Switching tabs seems to have the the tween continue so when you go back to the tab with the tween, it skips ahead and will become out of sync with the audio. My CodePen in the OP does it as well as it uses setTimeout but it's fine with delayedCall. Is there a way around that, other than re-enabling lagSmoothing when switching tab, and then disabling it again on focus?

You can read more here. So in my use case, the getter and setter are wrapper functions which return values on an adapter variable. Here's an example, maybe not the best but yea xD So it's current usage with still using 1.20 but now after upgrading to 3 it is not happy Was hoping it was backward compatible on this this part as this would require many extra functions on possibly many classes I'll give it a go and see how it is. Thanks!

Hi, I can't find much on recent posts on tweening with custom setters since gsap 3. I might be doing something really stupid or wrong but could use some help! So I have a problem with trying to tween an object using a custom setter, given this example code: var obj1 = { thing: 2, set_thing: function(val) { this.thing = val; }, get_thing: function() { return this.thing; } }; gsap.to(obj1, { set_thing: 5 }); On start, it appears to call set_thing(undefined) which causes the setter to set it to undefined if no undefined check is present. It then continues to tween from 0 -> 5 instead of 2 -> 5. You can see it in comparison on the code pen. The real scenario and issue here is with gsap and haxe. haxe uses getters and setters with get_xx and set_xx for variables. These are then directly not usable unless you specify @:isVar which is not a requirement and would not like to be forced to do that. So when trying to tween something with gsap in haxe code, I'd use{ set_xScale: 1.2 } for it to scale X var on the object from current (for eg, 1) to 1.2. But instead it tries to call the setter with an undefined value and sets it to undefined - which results it trying to tween from undefined to 1.2 and spazzes out. Hope I've explained well enough! Code Pen: This is the console output from the code pen below, for quick viewing.

To reduce potential issues or problems as a whole. So only disabling it for tween X, retests are then not required for tween Y. I thought I'd just ask It was just quickest example I could make In the scenario, is it not considered the first tween is becoming out of sync due to the CPU lag spike? That's how I see it. Another more realistic scenario would be only one tween which is moving a block 500pixels to the right, whilst having an audio queue play along side it. Both of them should complete/stop at same time. But with the lag, the tween is behind and audio continues and finishes first. Ideally would want tweens to jump for a tween that is just counting up a value, but be smooth for other tweens animating textures, for example. Sorry, thanks for putting up with my questions I am terrible at explaining things.

I understand the idea behind it and what it does but just wanted to ask those questions to have better knowledge So another quick thing, is it possible to only disable lagSmoothing for specific tweens? So currently it's just on the ticker for entire gsap engine and applies to all tweens, but this just popped into my thoughts. Also the lag and out of sync tweens from the OP - it is not smoothing out with the lagSmoothing due to the default threshold behind quite here, 500 I think? I think I did mess around with it but couldn't find a good balance to get it right - but that's for a set cpu lag, what if the lag is random between 100-1500ms. Thanks!

Indeed, disabling it instantly fixed it even with the old GSAP version. Ah ok so due it being wired with GSAP core it delays it all essentially. Why does disabling it completely fix this though? Should it only really be used if you know how much lag is being introduced? How come the default settings weren't enough? Should one call to lagSmoothing to change threshold in multiple places where lag is more likely to occur? Awesome thanks for the fix and detailed explanation

Hi Zach, Thanks! Nice, didn't know about the delayedCall function. Just used setTimeout to delay the lag spike by a few MS - but out of curiosity, why does using delayedCall alleviate the issue? Is the tween catching up with the spike after the CPU spike because of delayedCall? So the more realistic scenario is a h5 game using PIXI.js and gsap for tweening. There is a tween that is counting up a number, lets say like 1 - 1000 in 10 seconds with an audio (exactly 10 seconds too) queue playing along side it. The issue is upon rotating the device, a low-end more specifically, where a re-render of the pixi stage needs to occur and doing so the CPU spikes and lags behind. The tween then becomes out of sync with the audio queue and the audio completes way before the tween completes. Note: This is using GSAP 1.20 :D I made this sample to test whether or not newest version still possibly has this issue etc. But the video for 1.12 hints that out of sync-ness should not occur even at v1.12. I hope that possibly helps? Maybe you could guide me further.

Hi all, I'm wanting to know how compensating for lag/CPU spikes/rotating device causing CPU lag due to re-render being required. I made a quick test CodePen to try showcase the issue, not sure if it's the best way but hopefully it's enough? I found this old page for v1.12.0 which show cased `lagSmoothing` but I'm trying to essentially achieve what the 2nd button did with "respect timing with lag". I need tweens to jump ahead in advance to make for the time lost due to a CPU spike. The video hints that it should happen automatically within GSAP but I am failing to see if it in action? Otherwise the function I have to cause CPU lag spike might not be a true example? Please see the CodePen to see the example: The 2nd block should only move once first block touches it, but due to the lag spike - it appears to start too early as first block doesn't advance in time to account for the lag spike. The 3rd block should only move once the 2nd block touches it - which it does. Thanks!