Jump to content
GreenSock

mintervals

TimeLineLite iOs jerky animation with scrolling

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

Hi I'm having some issues with iPads and iPhones on this specific animation I am working on. It works great on all desktop browsers as well as Android devices and their available browsers. My problem is when I try on an iOs device. I thought it might have something to do with Request Animation Frame and have updated to 1.9.5. Here is a codepen link. You might have to download the .zip to test for touch input. Really odd that it works so well on non-iOs with finger 'scrolling'. Let me know if there is anything you can think of, I really appreciate it!

See the Pen GyJkB by sju (@sju) on CodePen

Link to comment
Share on other sites

Hi,

 

Thanks for posting the codepen. Neat example. It runs really smooth when I flick on my macbooks trackpad, and yes I know that is a different beast entirely.

 

From what I recall, iOS Safari suspends repaints / rendering while scrolling for maximum scroll performance. 

 

This stackoverflow post has some good info:

http://stackoverflow.com/questions/8293978/single-finger-scroll-in-safari-not-rendering-html-until-scroll-finishes

 

The folks who created SuperScrollorama faced similar hurdles. This demo has some useful info too: http://johnpolacek.github.io/superscrollorama/simpledemo_mobile.html

 

With all that being said, I really don't know what to advise, but perhaps someone else here does.

Link to comment
Share on other sites

Thanks for pointing me in the right direction. Definitely an iOs thing and not a browser thing. I'm going to scrap the scroll for mobile and ipad- I will add labels to the timeline and add some small nav buttons with tl.tweenTo("label1"). Seems to work great, thanks!

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