mr_exorcist

I described the issue few posts earlier and you can see it here: http://codepen.io/anon/pen/xgZMVd/ Situation: every period of time object is created. Initial period is 1 second, every second this period decreases due to the function "changingSpeedFunction". Every object just after creation gets tween to move from top to bottom of the screen with constant speed. Every second this speed increases due to the same function "changingSpeedFunction" (duration of tween is decreased, startTime changed to the later one). So at example object "1" is created at 0 seconds and has tween duration 7 seconds. At first second object "1" changes duration to 6.8 and startTime changes to 0.1 (all calculations are in changeCurrentSticksSpeed function) and object "2" is created with duration 6.8. At 1.9 seconds object "3" is created with 6.8 duration. At 2 seconds all 3 objects are changing duration to 6.6 and startTime to proper one. And so on. So if I have the situation when object "32" is just created, at example at 22.999983218947 second, tween is also created and tween duration is 5.239. At 23 second changeCurrentSticksSpeed function is triggered. It goes through every existing object and changes their duration and startTime to emulate acceleration. Object "32" is getting affected to. To change his duration and startTime properly I need to have proper tween.time() value: if it's 23 second and tween was created and began movement at 22.999983218947 second then it must has 0.000016781... value, but it has 0. So I have the situation when object already has been moved for may be 0.02 px (position().top) but tween.time() is 0 then i'm trying to get old speed value "var oldSpeed = distance / oldTime" and getting "Infinite" and next evaluations became incorrect. I want to be clear, that I don't need the solution, I already made a workaround (getting tween time from evaluations instead of tween.time() function). Just wanted to notify you about that situation that tween.time() is incorrect at extremely low values when it just began his work. If you want I can make sample at codepen to show alert when tween.time() is 0, tween.startTime() is n and current time is n+m, while m is not 0.

Hey guys, we actually found what was the problem with disappearing objects. http://codepen.io/anon/pen/xgZMVd/ If changeCurrentSticksSpeed() function is triggered just after stick with tween was created (at example after 0.001 seconds), I see that stick already has been moved for 0.1 px (at example), so tween already started his work, but tween.time() shows me 0, when it must be 0.001, that's why other calculations become incorrect and as result i set duration to infinite (because of division by zero) and stick doesn't move. We made a workaround for our case (calculating time as distance to speed division instead of getting it from tween.time()). Just wanted to notify you about this situation with tween.time(). And it would be great if tween.time() shows correct value even at extremely low values at the beginning.

Also I tried to change changingSpeedFunction from function changingSpeedFunction(x){ var y = Math.pow(2, (x / 20)); return y; } to function changingSpeedFunction(x){ var y = 1; return y; } another code stays the same and bug didn't reproduce. But when I changed to (after 1 second speed and stick creation became twice faster and then it's same for rest of time) function changingSpeedFunction(x){ var y = 2; return y; } Bug is reproduced. So seems like problem appears when tween properties changed and stick creation became faster. But that doesn't give information how to fix it.

So, I tried different scenarios: firstly I removed acceleration of stick generation period and made it constant (1s) - the bug did not reproduce: http://codepen.io/anon/pen/oBLGqe Then i decided that problem is in acceleration of stick generation period, so I added it and removed acceleration of existing sticks (changing duration and startTime of elements) - the bug did not reproduce: http://codepen.io/anon/pen/OWREzv So the problem is reproduced only when I have combination of these functionalities: http://codepen.io/anon/pen/xgZMVd/ I can't get why it happens. I could understand if it would be because of properties change, it could affect somehow TweenMax functionality. But it can't be reproduced when I ONLY change the properties. On other hand I have functionality where I only decrease delay of creating next element - doesn't affect TweenMax in any side. And only combination of these two functionalities causes bug to be reproduced. That's why I think it might be GSAP bug, I can't get how my code can rarely create tween with isActive = false (by the way when tween is just created it has _active false and isActve() true and only after few moments tween's isActive() becomes false, that's why I created var length = stickTweensArray.length; if (length >= 2 && !stickTweensArray[length - 2].tween.isActive()) { alert ("isActive() = false"); } on previously created tween). I also refactored code to be more clear and accurate and removed using private properties and it didn't help.

Yes, that's what I'm trying to do. Stable animation without chaotic changes. Yeah, that helped, animation is synced during the game even if I switch tabs, it's great! But when I use recursive delayedCall as setInterval, I have little problem: using delayedCall is not accurate enough. I rarely have problem when delayedCall with 1s delay is invoked faster then 5th recursive invocation of delayedCall with 199.4ms delay (summary 997ms). Of course it's not a problem of delayedCall, it's just because it tooks some time to run code before next delayedCall invocation. Now I'm trying to rearchitect calculation logic according to delayedCall feature. But it would be easier if TweenMax had direct functionality for setInterval or at least functionality to cancel upcoming delayedCall like clearTimeout/clearInterval. Also I found some bug with creating new TweenMax object. I thought that this is a sync problem too, but I found that this is another problem. Rarely and randomly when running this code: animateStick: function ($stick) { var _this = this; var translateYValue = this.windowHeight + -this.stickTop; var tween = new TweenMax($stick, this.stickDuration, { y: translateYValue, ease: Power0.easeNone, onComplete: function () { $stick.remove(); _this.stickTweensArray.shift(); } }); console.log(tween); _this.stickTweensArray.push({tween:tween, $stick:$stick}); } wrong tween creates with next properties: _active: false (when correct tweens have true); _dirty: true (when correct tweens have false); _propLookup: Array[0] (when correct tweens have Array[1] with y:Object inside); _startTime: NaN; matrix(1, 0, 0, 1, 0, 0) (when correct tweens have matrix(1, 0, 0, 1, 0, y(t)); also this wrong tween has less properties than the correct one. I thought may be my code is wrong and object $stick is wrong, but I checked it in debug and everything is fine with $stick. The bug is reproduced more often when the game goes faster. This bug is critical enough for me, so I hope you can help me with that. PS. You can observe this bug even in sample that i posted before, but very rarely (mb once or twice per run) and only almost at top speed (after 40s of running) http://codepen.io/anon/pen/xgZMVd/

Hi, I have also similar problems with animation, but my sample is more difficult: http://codepen.io/anon/pen/xgZMVd/ So, as I researched, I have next situation: 1. TweenMax (as it uses requestAnimationFrame) freezes when tab is inactive. 2. setInterval keep going when tab is inactive (also it's delay may change when tab is inactive, depends on browser) 3. Is there any other javascript functionality that changes when tab is inactive? Then I have 2 solutions: 1. Freeze whole game, when tab is inactive. 2. Keep going, when tab is inactive. With first solution I have next problem: as TweenMax uses requestAnimationFrame, it works correct according to this solution (freezes animation), but how can I freeze intervals and timeouts when tab is inactive and then resume intervals and timeouts? With second solution I can use TweenMax.lagSmoothing(0) and TweenMax.ticker.useRAF(false) for animation and it works, but anyway something goes wrong with intervals and/or timeouts. I expected that animation goes wrong because of change of interval delay to 1000+ ms when tab is inactive (according to http://stackoverflow.com/questions/15871942/how-do-browsers-pause-change-javascript-when-tab-or-window-is-not-active), but I disabled acceleration and set delays to 2000ms and it didn't help. Please help me with at least one solution. Better with both to have some variety. By the way, TweenMax is great framework, thank you very much for its development and support.