Jump to content
Search Community

Horizontal scrolling flickers and is extremely clunky on phones

saminulldreinull test
Moderator Tag

Go to solution Solved by GSAP Helper,

Recommended Posts

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

	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

Link to comment
Share on other sites

  • Solution

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:


Does that help at all? 


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...