Scroll animations botched on mobile

[aigasd]

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 GSAP, as I am still getting acquainted with both. Live site can be found here:

GitHub

[krnlde]

I guess you already use the iScroll mobile implementation?

[MichaelCalleia]

Seeing the same issue in Safari iOS 9.x.

My content is wrapped in a big container as per http://scrollmagic.io/examples/advanced/mobile_basic.html

@krnlde thought iScroll only needed to preseve scroll momentum. Is this not correct?

[krnlde]

I didn't say it is only used to preserve momentum. It is use to enable smooth transitions, since mobile safari only triggers scroll once finished.

[MichaelCalleia]

Resolved on my site. @aigasd here is the fix.

The solution is on this page, but it is not spelledout: http://scrollmagic.io/examples/advanced/mobile_basic.html

Here is a detailed version:

1. Put a div wrapper around your scrolling content.
2. Give the wrapper an id and a class, for example: <div id="superWrapper" class="scrollContainer">
3. Add the following to your css:

    #superWrapper {
        height: 100%;
    }

    .scrollContainer {
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
    }

Scrolling now works, but it not the smoothest in the world. Going to try adding the iScroll mobile implementation to see it improves the smoothness of scrolling.

[krnlde]

The smoothness of your animation depends on the complexity of it. The easier it is and the more you rely on hardware acceleration the smoother it gets.

[lukedohner]

almost a year later... Try this to smooth out gsap animations > force3D:true, rotationZ:0.01 tl_bridge.to(baseplate, 20, {x:0, y:3000,scale:1, force3D:true, rotationZ:0.01}, '0');