Scrolltrigger timeline tweens laggy/jittery on iOS

[Tom51north]

I'm working on a prototype for a mobile-only website. The concept is, that there is an image with a route on it and the page scrolls along the specific route. The image with the route is larger than the screen and will be updated with x/y transforms to follow the route during the scroll. I've created a GSAP timeline with the different points on the route and synced it to a GSAP ScrollTrigger instance. The trigger ('.scroller'.) is an invisible div with a height of 2400vw, which solely functions as the scroll distance.

 

The demo is visible on: https://scrolltrigger-test-ib0bhfhl2-tom51north.vercel.app/.

 

The demo works smoothly on desktop (use the mobile debug tool). However, on iOS the whole animation is kind of buggy/laggy when you scroll down the page and I can't find out why. I also have added a FPS meter, but that also shows 60 fps.

 

Does anyone have an idea why the whole animation is buggy and how I can fix it?

 

 

const scrollTl = gsap.timeline({
  scrollTrigger: {
    trigger: ".scroller",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-33vw', y: '-59vw', ease: 'none' }, 0);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '7vw', y: '-91vw', ease: 'none' }, 1);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '47vw', y: '-130vw', ease: 'none' }, 2);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-4vw', y: '-169vw', ease: 'none' }, 3);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-57vw', y: '-203vw', ease: 'none' }, 4);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-106vw', y: '-244vw', ease: 'none' }, 5);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-68vw', y: '-270vw', ease: 'none' }, 6);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-9vw', y: '-264vw', ease: 'none' }, 7);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '26vw', y: '-292vw', ease: 'none' }, 8);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '64vw', y: '-322vw', ease: 'none' }, 9);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '14vw', y: '-375vw', ease: 'none' }, 10);
scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-38vw', y: '-410vw', ease: 'none' }, 11);

 

.scrolltrigger-test {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #008238;
    }
    
    .scrolltrigger-test__visual {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden; 
    }

    .scroller {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2400vw;
    }

    .scrolltrigger-test__visual-background {
        position: relative;
    }

    .scrolltrigger-test__visual-background-image {
        display: block;
        position: relative;
        width: 280vw;
        height: auto;
        top: -10vw;
        left: -72vw;
    }

 

[GreenSock]

iOS is by far the most buggy browser I've ever seen, especially when it comes to scrolling. There are known major browser bugs that have existed for years and Apple has acknowledged. It cannot properly synchronize scroll natively. That's why we spent hundreds of hours crafting the ScrollTrigger.normalizeScroll(true) feature - have you tried that? It's not a magic bullet, of course, but it can significantly help in certain scenarios especially with iOS Safari. You could also try using ScrollSmoother and set the smoothTouch to a very small number. 

 

Does that help at all? 

[Tom51north]

Thank you! The ScrollTrigger.normalizeScroll(true) fixed it! 😀

 

FYI: I didn't changed it on the provided demo-link, but it's fixed.