How To Control Horizontal Scroll Section As a Tabs Element ?

[Majharul Islam 2 Likes (Newbie)]

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

[mvaneijgen 1,527 Likes (Superhero)]

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

 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

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! 

[Majharul Islam 2 Likes (Newbie)]

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☺️

[Majharul Islam 2 Likes (Newbie)]

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

[Rodrigo 5,038 Likes (Superhero)]

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

1 hour ago, Majharul Islam said:

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

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!

[Majharul Islam 2 Likes (Newbie)]

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