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

[Majharul Islam]

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

[GreenSock]

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: 

See the Pen jOppZqX?editors=0010 by GreenSock (@GreenSock) on CodePen

[Majharul Islam]

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😚