Jump to content
Search Community

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

VikAPAD test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
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...