Fixing Jumping Cards in Parallax Scroll on Mobile

[torrente]

Hi everyone!
I have a problem on mobile where the cards located in the parallax scroll section move and jump during scrolling. I’ve read previous posts about similar issues and saw that the following settings might solve the problem:

javascript

ScrollTrigger.config({ ignoreMobileResize: true });
ScrollTrigger.normalizeScroll(true);
anticipatePin: 1;

For me, ScrollTrigger.normalizeScroll(true) solved the issue, but unfortunately, it completely broke several other animations, starting with the fixed position of the navbar.

Is there any other method to fix this kind of movement/jumping issue with the cards?

It’s possible that this problem isn’t visible in the CodePen example, but if needed, I’d be happy to create a video to demonstrate it.

Thank you in advance for your help!

See the Pen raNGmoG by SZENTIOSZ-the-SZAMOSZ (@SZENTIOSZ-the-SZAMOSZ) on CodePen.

[torrente]

Update:
I have a smoothScroll function where, if I set this value, the lagging/jumping issue disappears:
smoothTouch: 0.1
 

[Rodrigo]

Hi,

 

Is good that this got resolved but just out of curiosity I forked your demo, made a few CSS changes to it (nothing that really changes the way it works) and using the ignoreMobileResize config works fine in both iOS and android (chrome, firefox and safari):

See the Pen RNwLQOO by GreenSock (@GreenSock) on CodePen.

 

Here is the debug view so you can test directly on devices:

https://cdpn.io/pen/debug/RNwLQOO

 

Hopefully this helps

Happy Tweening!

[torrente]

Thank you very much! During later testing, some performance issues arose while scrolling, but we managed to optimize everything perfectly afterward, so now everything works great.

Here’s how I modified the ScrollSmoother settings:
 

function smoothScrollPhone() {

    let mm = gsap.matchMedia();

   

    mm.add("(max-width: 992px)", () => {

        ScrollTrigger.config({

            ignoreMobileResize: true

        });

       

        ScrollSmoother.create({

            effects: false,      

            smoothTouch: 0.15,  

            ignore: ".mobile-nav",

            normalizeScroll: true,

            smooth: 1.1,        

        });

 

       

        document.addEventListener("touchmove", (event) => {

        }, { passive: true });

 

        document.querySelectorAll("img[data-src]").forEach(img => {

            img.src = img.dataset.src;

        });

 

       

        return () => {

            if (ScrollSmoother.get()) {

                ScrollSmoother.get().kill();

            }

        };

    });

}
and here is the css changes:
 

#smooth-content 
{
    will-change: transform;
    transform: translate3d(0, 0, 0);
}