Majharul Islam

Hi Guys I make a code for horizontal scroll and its work perfectly in desktop devices but in the mobile device when I scrolling with touch it's create some leg. Here Is The Problem: 2023-02-10-00-26-59_KaHU5Lcj (1).mkv Here Is My Code: useEffect(() =>{ const panel = document.querySelectorAll(".panel"); const panels = document.querySelectorAll(".panel").length; const containers = document.querySelector(".containers"); const pin = document.querySelector(".container"); const ctx = gsap.to(panel, { xPercent: -100 * (panels - 1), ease: "none", scrollTrigger: { start:"center center", trigger: containers, pin:pin, scrub: 3, end: () => "+=" + containers.offsetWidth }, }); setTimeout(() => { ScrollTrigger.refresh() if (ctx && ctx.scrollTrigger && ctx.scrollTrigger.scroll() > ctx.scrollTrigger.start) { ctx.scrollTrigger.scroll(ctx.scrollTrigger.start); } }, 200); return () => { ctx.revert() } },[activeTab,]) Please Make me solution of this. Thanks?

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?

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:

Thank you so much @GreenSock ?

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.

Thank You So Much @Rodrigo Actually I am New In React?. By the way , I am happy with your solution Thanks Again?.

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

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

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