How do I prevent frame "catch-up" when JS is paused?

[MyNameIsKo]

Hi,

 

I have an animation that I simply want to pause and then continue whenever JavaScript is hibernating due to a scroll on mobile safari.  Unfortunately, GSAP has some sort of algorithm under the hood that adjusts a tween's progress based on elapsed time since last execution (I believe).  Is there any way to disable this functionality or perhaps a plugin available that I might have missed in my search that will auto-magically pause all tweens when a scroll is detected?

[Carl]

Hi and welcome to the GreenSock forums.

 

When building robust sequences it is absolutely critical that tweens start and end when they are told to, that is why "elapsed time" is always honored by default. There are scenarios like yours though where that behavior may not be desired.

 

You can optionally set useFrames:true on your tweens or timelines.

 

 

 

//duration is 30 frames not 30 seconds
var TweenLite.to(elem, 30, {left:300, useFrames:true});
 

 

When useFrames is set to true, animations will be rendered based on how many frames have fired and not how much time has elapsed. If iOS is suspending all JavaScript events during scroll, this should work well  for you.

 

Another option is to use TimelineLite's exportRoot() method to gather all animations into a new timeline that can be paused when the scroll starts and then resumed when the scroll is over. 

 

To see this in action 

 

1: visit http://www.greensock.com/gsap-js/

2: while the animation is playing click the "getGSAP" button

3: notice when the download screen comes into view, the animation on that page stops.

4: close the download screen and notice the animation auto-magically resumes.

 

When the download screen comes to view, there isn't any code that stops a particular timeline. exportRoot is used to grab all the animations on the page, place them in a new timeline and pause it. This can come in really handy. 

 

It might be a little tricky figuring out how to fire off the necessary code when the scrolling starts and stops, but in theory, using exportRoot() should work. 

 

Hopefully some of this helps solve your issue. Thanks for giving GSAP a spin. Let us know if we can help you more.

[MyNameIsKo]

That makes sense.

 

The documentation doesn't really clear up what frames refer to when used on a Tween instance outside of a Timeline, leaving me with a couple questions.  Is each frame then referring to a requestAnimationFrame callback?  Will the timeScale property still work?

 

While I haven't the moment to play with your demo, if exportRoot() requires extra code to tell it to stop on a scroll start then I'm afraid that is currently unavailable in iOS as, unlike desktop webkit, the onscroll method seems to only fire at the end of a scroll.

[Carl]

Yes, when useFrames is set to true, each frame refers to a requestAnimationFrame callback (if supported by your browser).

 

This example shows a tween with useFrames:true. Notice that when the requestAnimationFrame is suspended via the alert(), the text will resume animating from the position it was in prior to the alert() appearing.

See the Pen 7398cc3bd9b9a4dd796d25c748f205b5 by GreenSock (@GreenSock) on CodePen

 

This example shows that if for whatever reason requestAnimationFrame is suspended, the tweens will still honor the elased time. You will notice the text jump when the alert is closed.

See the Pen 19e1cb35056afafcf19f945eb90d1a11 by GreenSock (@GreenSock) on CodePen

 

And yes, timeScale can still work on tweens with useFrames:true.

 

Let us know if you need any more help.