Jump to content
Search Community

Fix The Leg Isso Of Horizontal Scrolling Panels From Mobile Device.

Majharul Islam test
Moderator Tag

Recommended Posts

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😊

 

Link to comment
Share on other sites

Hi,

 

Sorry to hear about the issues. Unfortunately a code snippet and a video is not enough for us to give you some advice on this. Please create a minimal demo showing exactly what you're doing without copying your entire project, just the parts that are causing troubles.

 

You can fork this starter template:

https://stackblitz.com/edit/react-cxv92j

 

Also there is any reason for not using GSAP Context? Indeed you're cleaning up correctly in your code, but is always recommended to use GSAP Context in your React apps.

 

Finally your video is not actually from a real device, it is a screen of the browser's devtools emulating the size of a mobile screen. Have you actually tested this in a real device? If you have, please provide details about the device, OS and browser please.

 

Happy Tweening!

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...