Jump to content
Search Community

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

Majharul Islam test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi Friends,

Recently I make this horizontal scroller tab:

hh.thumb.png.c5ddb29f711ecdf4ea24c9437bf3394d.png

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

Link to comment
Share on other sites

  • Majharul Islam changed the title to How Start This Horizontal Scrolling Panels From Beginning When Click One A New Tabs Button?
  • Solution

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

  • Like 2
Link to comment
Share on other sites

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?

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