Hi Guys
I make a code for horizontal scroll and its work perfectly in desktop devices but in the mobile device when I scrolling with touch it's create some leg.
Here Is The Problem:
2023-02-10-00-26-59_KaHU5Lcj (1).mkv
Here Is My Code:
useEffect(() =>{
const panel = document.querySelectorAll(".panel");
const panels = document.querySelectorAll(".panel").length;
const containers = document.querySelector(".containers");
const pin = document.querySelector(".container");
const ctx = gsap.to(panel, {
xPercent: -100 * (panels - 1),
ease: "none",
scrollTrigger: {
start:"center center",
trigger: containers,
pin:pin,
scrub: 3,
end: () => "+=" + containers.offsetWidth
},
});
setTimeout(() => {
ScrollTrigger.refresh()
if (ctx && ctx.scrollTrigger && ctx.scrollTrigger.scroll() > ctx.scrollTrigger.start) {
ctx.scrollTrigger.scroll(ctx.scrollTrigger.start);
}
}, 200);
return () => {
ctx.revert()
}
},[activeTab,])
Please Make me solution of this.
Thanksš