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

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😊

 

[How Start This Horizontal Scrolling Panels From Beginning When Click One A New Tabs Button?]

5 hours ago, GreenSock said:

Can you explain what you mean by "I want to start it from the beginning when I click a new tab button"? Do you mean that you want the scroll position to jump all the way up to the very top? If not, how exactly would you expect it to start over if the scroll position remained fixed? 

 

You're doing a good job of doing cleanup with revert(). You might want to consider using gsap.context() to make it a little bit easier, especially with scoped selections. See

 

I'm not much of a React guy, but it sure looks to me like a fundamental problem in that setup is that when you update the state, it's firing the useEffect() BEFORE everything has fully rendered in the new state, thus there are still layout changes that occur after that point, throwing off the ScrollTrigger stuff. I don't have time to dig into all that right now, but here's a quick fork that uses a setTimeout() to show what I mean: 

 

 

I really Love your solution😘

This perfect for me but some time make little bit problem in codesandbox but in my real project It no longer shows😂, i don't know why but perfect😗

 

Again really thanks to @GreenSock😚

[How Start This Horizontal Scrolling Panels From Beginning When Click One A New Tabs Button?]

Hi Friends,

Recently I make this horizontal scroller tab:

Everything Is ok but when I scroll it for horizontally and then I clicked one of the tab button and it Begins again from where it ended, and this problem clearly show in my react js project and codesandbox. Please Kindly Check my codesandbox link. Now, just I want to start it from beginning when I click a new tab button.

Here is My  Codesandbox Link For You:

https://codesandbox.io/s/fix-this-tab-the-problem-kskoe3?file=/src/App.js

 

Please Solve It For Me☺️

 

Codepen Link:

 

See the Pen KKBByLq by majharul0 (@majharul0) on CodePen

[How To Remove White Space After Horizontal Scroll In Tabs?]

27 minutes ago, GreenSock said:

It's not related to GSAP at all - if you console.log() your Array, it always has a length of 5. Like for the 2nd group, it's 

[div.panel, div.panel, div.panel, null, null]

So you're animating xPercent to -500 every time. You should just fix your Array and then it'll work. 

 

By the way, I'd recommend using gsap.context() in React. You've only got one tween there, so your technique is fine in that one case, but I just like getting people used to using gsap.context() in React because it solves so many issues. If you haven't read this yet, I'd recommend it: 

 

Happy tweening!

Thank you so much @GreenSock 🥰

 

[How To Remove White Space After Horizontal Scroll In Tabs?]

I am using React JS To make this horizontal scroll, It works perfectly without any white space problem but when I try it as a tabs element, I can't do this anymore.

Here is the codesandbox Link:

https://codesandbox.io/s/remove-white-space-after-horizontal-scroll-zlt2rm?file=/src/index.js

I think, the problem is when I switch tab it's can't resize it's self.

 

[How To Control Horizontal Scroll Section As a Tabs Element ?]

44 minutes ago, Rodrigo said:

Hi,

 

This is mostly a React problem and not GSAP related. You have to tell React that the current tab set has changed in the dependencies array of the effect hook and also always revert your context:

useEffect(() => {
  //horizontal scrolling stuff
  const panels = panel.current.length;
  const ctx = gsap.to(panel.current, {
    xPercent: -100 * (panels - 1),
    ease: "none",
    scrollTrigger: {
      trigger: panelsContainer.current,
      pin: true,
      scrub: 1,
      snap: {
        snapTo: 1 / (panels - 1),
        ease: "linear"
      },
      end: () => "+=" + panelsContainer.current.offsetWidth
    }
  });

  return () => ctx.revert(); // cleanup Important!
}, [currentTab]); // Update your animation when the tab has been updated

Finally regarding this, please be as nice as possible with Moderators and other users that are trying to help in the forums since Mitchel (@mvaneijgen) is a voluntary here in the forums, so he takes time of his own work and daily activities to help users in the forums. Don't look into it as a warning or anything like that, just a friendly suggestion of the tone and general attitude in the forums towards other users. We understand that sometimes there is frustration and deadlines looming, but it is also very important to maintain respect and consideration when asking for help with your projects.

 

Happy Tweening!

Thank You So Much @Rodrigo

Actually I am New In React🙂. By the way , I am happy with your solution Thanks Again🥰.

[How To Control Horizontal Scroll Section As a Tabs Element ?]

3 hours ago, mvaneijgen said:

Hi @Majharul Islam welcome to the forum!

 

It seems like you are loading older versions of GSAP. I recommend bumping them to 3.11.3 the latest version if you don't have any particular reason for it. Here is a demo that uses the scrollTo plugin

 

 

 

 

Also, if you search the forums, you will find quite a few threads with a similar topic, which might be helpful for you.

 

 

 

 

Hope it helps and happy tweening! 

Buddy, I make it more easy for you,

Codesandbox Link: https://codesandbox.io/s/horizontal-tab-content-xfwmwn

Now, Please Check My Problem and Try it to Fix.

thanks

[How To Control Horizontal Scroll Section As a Tabs Element ?]

1 hour ago, mvaneijgen said:

Hi @Majharul Islam welcome to the forum!

 

It seems like you are loading older versions of GSAP. I recommend bumping them to 3.11.3 the latest version if you don't have any particular reason for it. Here is a demo that uses the scrollTo plugin

 

 

 

 

Also, if you search the forums, you will find quite a few threads with a similar topic, which might be helpful for you.

 

 

 

 

Hope it helps and happy tweening! 

Thanks For Your Reply!

Actually I don't need anchor , I want to make a whole panels section and that whole panel section should be change when I click on tabs button.

for Example: When I click the "section one" Button it should show me just all panels of section one.  Likewise, when click on "section two" it should show all panels of section two.

I think I could understand It.

 

 

also You Can check My Tabs Data It will help you to understand More:

 

Thanks Buddy.

I am waiting for you☺️

[How To Control Horizontal Scroll Section As a Tabs Element ?]

I want to change my horizontal scroll element click on tabs . I try it in my main project but I can't  do this.

Codesandbox Link : https://codesandbox.io/s/horizontal-tab-content-xfwmwn

I just simply make this template for fix this.

so, please help me to complete this. Please

Thanks..