Jump to content
Search Community

TimelineMax: Animations don't play on first load ios

vsiege 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 experiencing a problem only on ios, Safari and Dolphin.


When the page first loads, the TimelineMax animation will not play. If I tap somewhere on the screen (not on a button) or reload page, everything plays.


I cannot seem to figure this out and I have tired rearranging the order of the way the page loads and to no avail, nothing works unless I reload the page or tap on the screen in a random spot. I checked the console.log and no issues.


I could really use a bit of help on this one.




Works on:

DESKTOP: Safari, Chrome, FF and Opera


Broken on:

iOS: Safari and Dolphin

Link to comment
Share on other sites

Are you using the latest version of GSAP? There's a bug in iOS Safari (the browser itself, introduced in iOS 6) that sometimes prevents the requestAnimationFrame from working properly, but a workaround was implemented a while back in GSAP that causes it to check after 1 second and fall back to setTimeout() if the requestAnimationFrame still hasn't been dispatched by the browser.

Link to comment
Share on other sites

Thank you.


I wanted to post back as quick as possible as you have done the same sir.

It looks like that has done the trick. If by chance tomorrow whenI test on another device, things break again, I will let you know. As always, thanks for the excellent work and support.

Link to comment
Share on other sites

Unfortunately it looks like I am still experiencing the same issue. If you swap between these two pages you can see that each triggers a different timeline but the same but it only works if you reload the page again. All libraries have been updated as per your request.




Link to comment
Share on other sites

From the traces on the screen, it looks like one is literally getting paused. However, to really isolate the problem and see if it's something in your code or in the engine itself, you'd really need to strip out all the extra stuff in there (it looks like you're using lots of other code and libraries like MooTools, jQuery, etc.) Can you just create the most basic page possible and try to recreate the problem in an isolated fashion? Nobody else that I can remember is having similar problems and things seem to work fine on my iOS devices including TimelineLite instances. Of course that doesn't mean there isn't a bug somewhere in the engine. I'd certainly like to make sure everything is working well, so a very basic example would be greatly appreciated. I'm sure we can get this figured out together.

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