How To Remove White Space After Horizontal Scroll In Tabs?

[Majharul Islam]

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.

 

[GreenSock]

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!

[Majharul Islam]

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 🥰