TimeLineLite iOs jerky animation with scrolling

[mintervals]

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

[Carl]

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.

[mintervals]

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!