Jump to content
Search Community

How To Control Horizontal Scroll Section As a Tabs Element ?

Majharul Islam test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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! 

Link to comment
Share on other sites

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.

 10305459_OperaSnapshot_2022-11-21_170320_codepen_io.thumb.png.b4c004da57908f1dce1fad163e219136.png

 

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

236528387_OperaSnapshot_2022-11-21_171431_codepen_io.thumb.png.6cdd75d56bb2484adb209ed8d0de26c7.png

 

Thanks Buddy.

I am waiting for you☺️

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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!

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
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...