Adding "active" styling to nav in variable width horizontal ScrollTrigger

[VikAPAD]

I am using the "ScrollTrigger - horizontal scroll with variable width sections and anchor links" Pen and I am trying to modify it in order to style the links based on which panel is currently in view. I've found a couple different solutions for styling the nav, but I can't seem to get it working with this variable width solution. I believe the problem lies somewhere within the start/end position for the sections loop.

 

Here's where I'm stuck currently (I added 2 comments in the area I've been working in):

See the Pen poKKGVO by VikAPAD (@VikAPAD) on CodePen

[GreenSock]

There are quite a few ways to approach this. Here's one: 

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

 

The problem with setting up a ScrollTrigger for each is that you'd have to figure out where to put the start/end values such that at all times, the closest one to the center is "active" which is more tricky with variable width sections. So I just use an onUpdate on the timeline that's moving things horizontally, knowing that you've got labels in there that everything is keyed off of anyway, so we can just check for the closest one and if it's different, fire off those animations accordingly. No need to mess with starting/ending values or multiple ScrollTriggers. 

 

I hope that helps!

[VikAPAD]

Perfection. Thank you!