saminulldreinull Posted May 12, 2024 Posted May 12, 2024 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.
Solution GSAP Helper Posted May 13, 2024 Solution Posted May 13, 2024 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 Posted May 13, 2024 Posted May 13, 2024 Hi, I tested on an android phone that is not extremely powerful and everything looks OK to me on chrome and firefox ?♂️
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now