Horizontal scrolling flickers and is extremely clunky on phones

[saminulldreinull]

Hello, I am really new to GSAP. I came across to GSAP when I looked for a way to implement horizontal scroll behaviour through vertical swipe gesture. I implemented this tool already and it work really well on my desktop after i implemented following declaration in my CSS.

.races {     
transform: translateZ(0);
transform: translate3d(0,0,0);
 will-change: transform;
}

.

Also, I implemented force3D in order to improve the perfomance even more:

const races = document.querySelector(".races");
function getScrollAmount() {
	let racesWidth = races.scrollWidth;
	return -(racesWidth - window.innerWidth);
}

const tween = gsap.to(races, {
    x: getScrollAmount,
    duration: 3,
    ease: "none",
    force3D: true//this
});


  
  ScrollTrigger.create({
	trigger: ".racesWrapper",
	start: "top 20%",
	end: () => `+=${races.scrollWidth}`,
	pin: true,
	animation: tween,
	scrub: true,
	invalidateOnRefresh: true,
	onRefresh: () => tween.invalidate()
  });
  

It worked for my desktop really well. But the horizontal scrolling is delaying and flickering or unsmooth respectively. I do not now, what to do. I hope that I can get help from here.

See the Pen LYoEdvw by saminulldreinull (@saminulldreinull) on CodePen

[GSAP Helper]

Hm, I'm not seeing any weirdness or flickering on my iPhone. Is there a secret to getting it to misbehave? 

 

You're using the latest version of GSAP on your site, right?

 

One thing you could try (at least on mobile devices) would be:

ScrollTrigger.normalizeScroll(true);

Does that help at all? 

 

Oh, and I'd recommend removing Lenis to see if that's involved in the problems. 

[Rodrigo]

Hi,

 

I tested on an android phone that is not extremely powerful and everything looks OK to me on chrome and firefox 🤷‍♂️