[Scrolltrigger timeline tweens laggy/jittery on iOS]

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

 

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

[Scrolltrigger timeline tweens laggy/jittery on iOS]

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;
    }