Jump to content
Search Community

Issues in ios6 when navigating to another animated page before the tween of previous page has finished

noekidotcom test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I'm having a problem with several animated pages on my site that make use of gsap TimelineLite tweens.

The thing is this issue can only be reproduced in my Ipad (I'm testing on an ipad mini with ios 6.1.3).

If I go to a page with a tween it is reproduced with no issues whatsoever, but whenever I navigate to another animated page without letting the previous tween finish, the animation on the destination page will not start unless I force a page refresh. No issues appear if I wait until the end of the animations before navigating to the next page.


I'm a complete newbie. Can you think o a fix for this?


Here's a super simple link to test:




Thank you in advance!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry to hear about the trouble.

Thank you so much for providing the example. Very helpful. 


I was able to replicate the problem on my iphone exactly how you described.


Can you please try this modified version of your files with your iPad?




On my end, this version seems to be working fine.


The only significant change that I made was that I moved the 

script tags to the bottom of the body as opposed to being in the head.


Going in I had a few assumptions:


1) the onload event was not firing, thus play() was never called 

2) the onload was firing prior to the jquery loading and thus your jquery selectors weren't working

3) somehow the onload was firing after your scripts were loaded but before the DOM was accessible and thus the jquery selectors weren't valid


None of these reasons really make a ton of sense to me but the fact is that making sure the DOM was loaded and processed PRIOR to loading and executing any other javascript seems to have solved the issue.


I wasn't able to do extensive debugging, but moving the scripts around definitely seemed to fix it.


Let us know if my proposed fix works for you.

I've attached a zip of the html incase you or anyone else wants to test more


Note, I'm using TweenMax 1.10.1 but updating to that version alone did not solve the issue.


  • Like 1
Link to comment
Share on other sites

First of all, thanks so much for such a quick answer.

I tested the link you provide and it seems to work though with a slight frame jump in the first tween (heading).

I tried to do the same in my original project (this is, changing the placement of both jQuery and Tweenmax script tags to the bottom of the page just as you did). I was  using VERSION: beta 1.9.4 and it didn't seem to work, but changing the script to  VERSION: beta 1.10.1 definitely made the change...(I wonder why it did not help solve the issue when you tested the page).


I'll continue testing to make sure the results are not ramdomly buggy and I'll keep you all posted if I am able to get a pattern here.


Once again, thanks a lot!

  • Like 1
Link to comment
Share on other sites

I believe I've uncovered a scenario in which iOS 6 Safari drops requestAnimationFrame events when you switch away from a tab and then come back again (intermittent - it doesn't happen every time). Again, this is a bug in iOS, not GSAP. However, I've implemented a workaround in the attached preview of 1.10.2 - would you mind giving that a shot and letting us know if it resolves things for you? 


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...