Scoll-based animation botched for mobile...please help!

[aprince]

Hi,

 

I am using a combination of ScrollMagic and GSAP to achieve a scroll-based (100% height/duration) animation at the top of my page. Everything works great in Safari/Chrome/Firefox, but when I test on mobile (iOS) the animation is all screwy. Seems to be an issue with overflow and/or viewport height, but I cannot seems to find a fix. Apologies in advance if this is an issue related to ScrollMagic (not GSAP), as I am still getting acquainted with both. Live site can be found here:

 

http://aigasd.github.io

 

[GreenSock]

Welcome the forums, aprince. We'd love to help, but unfortunately we just don't have the resources to provide free general consulting services for troubleshooting projects where there are a bunch of other things at play (we didn't create nor do we directly support ScrollMagic, and it looks like you've also got animate.css on that page for CSS animations which could cause conflicts, etc.). We'd be happy to answer any GSAP-related questions though. 

 

I'm pretty confident the issue you're running into is not related to GSAP. It sounds more like a CSS or media query thing or some funky logic somewhere. I noticed you're doing some custom JS on every "scroll" event which is a tad dangerous (it can just be very CPU-intensive and cause layout thrashing). 

 

If you still think it's a GSAP issue, I'd suggest creating a reduced test case that isolates things further (probably remove the animate.css stuff and ScrollMagic) and shoot us a codepen (or jsfiddle) link to peek at. Again, we're happy to help with any GSAP question and I wish we had more resources to offer more general consulting services. Perhaps someone else here will have the time to dig in and analyze all that you've got going. 

 

Happy tweening!

[aprince]

Understood, and thanks for the thorough response. I am troubleshooting now, per your suggestions. I will be sure to post my findings if they seem useful to this forum. Thanks for an amazing tool...just getting familiar, but super fun so far!