Pause all timelines when page is not "focus" safari iOS

[martis]

Heya,

 

I am running into an issue on one of my sites where when I navigate away (open a new tab) and come back to my tab my animations are out of sync. Does anyone know a way to detect if the user has navigated away, and navigated back? Tried blur and unload on window, but no luck...

[Jonathan]

Hello martis..

 

Here is an example that checks for window focus / blur events. It also checks for browser tab focus and blur using HTML5 Visibility API .. so you can pause() and resume() the animation on window tab focus / blur:

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

does that help?

[martis]

Does it work for safari on iPhone and iPad?

[Jonathan]

It worked when I first tested and made that codepen, which wasnt that long ago.. it works in Modern Browsers and mobile browsers.

 

But If you go to that codepen link I referenced above, you can test it on your IPhone or IPad you might have to open the pen in Full View.. just follow the short directions in the codepen, which is just simply focusing in and out by switching tabs and browser windows:

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

So it's best to test it on your devices.. Also I'm sure that some of the fine minds here who have looked at that codepen above can share how it behaved on their IPhone or IPad