Scrolltrigger doesn't work and issue in implementing the use case

[RADNM]

Hey guys I'm trying to implement  where I want to pin a section to the center and change the active tabs while scrolling and when the user scrolls to the last tab and when user scrolls further then the section should be unpinned and the active states of the tabs should change and the content should also be changed. Right now I couldn't implement this  it changes on click only I need to have both functionalities onclick and while scrolling as well to change the active tabs and the content rendered.Please showme a way to do this with an animation when scrolled and when clicked 

 This is the sample project that i recreated for my project

https://stackblitz.com/edit/stackblitz-starters-kypshj?file=components%2FValue.tsx

Thank you in advance

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time.

 

It looked like you weren't registering the useGSAP and you were creating your matchMedia() OUTSIDE of the useGSAP() which is not a good idea. Is this any better? 

https://stackblitz.com/edit/stackblitz-starters-hgyqdb?file=components%2FValue.tsx

[RADNM]

Thank you for the support what i find difficult is a way to know which container is shown at the moment is there a way to know that . Where I want to change the rendered content div and its relevant tab chip to active state 

[GSAP Helper]

I'm confused - isn't that what the demo is already doing (on adequately large viewports)? You're calling setActiveIndex() in an onToggle. I guess I don't really understand what you're asking. 

[RADNM]

Yeah it works but it skips some active chips when scrolled it doesn't work smoothly

[GreenSock]

Oh, that's a logic issue in the way you coded it  - you're depending on the onToggle to always fire, but if you scroll very quickly it might not because the active state may not toggle. For example, let's say you've got a ScrollTrigger that starts at a scroll position of 100 and ends at 150, and the user scroll really fast such that the scroll position goes from 98 to 161 (skipping over that ScrollTrigger) - it'd never toggle. 

 

You could just create a simple timeline with callbacks positioned on it like this: 

https://stackblitz.com/edit/stackblitz-starters-hgyqdb?file=components%2FValue.tsx

 

Is that better?