Gsap ScrollTrigger and a click event using scrollTop highlighting menu items

I've a menu where each item corresponds to a

section

section

div.

Click on an item, it adds a

border-bottom

border-bottom

, and scrolls somewhere vaguely near the element (because life, and scroll-padding, just can't be that easy). Simple stuff.

But then I've added

ScrollTrigger

ScrollTrigger

to track which section I'm above when scrolling and change the active menu item accordingly. This unfortunately means that when you click a menu item, say item 4, it now scrolls to 4, but highlights menu items 1,2,3 and then 4 on the way there.

Just wondering how people would approach this, because at the moment my solutions feel a bit hacky. Eg: I'm considering disabling

ScrollTrigger

ScrollTrigger

quickly after the click event, and then listening for a scrollend event to re enable it, or making the

border-bottom

border-bottom

transparent. There's a property to prevent animations overlapping:

 preventOverlaps

 preventOverlaps

but I've either implemented it wrong or it doesn't disable the callbacks (

onEnter

onEnter

etc). Just think there must be a better solution I haven't thought of.

Here's a codepen

https://codepen.io/nwoodward/pen/NWBmZgd?editors=0011

CodePennick

In Viewport Menu

...

b1mind•2/8/23, 9:44 PM

I disable scroll-behavior: smooth

b1mind•2/8/23, 9:44 PM

or rather don't use it when I have this case, I don't like the motion on anchor tags personally

b1mind•2/8/23, 9:46 PM

ah but how you have things set up I guess it would still roll through each.

JWodeOP•2/8/23, 9:53 PM

I was hoping you'd see this

b1mind•2/8/23, 9:53 PM

Yea I'm semi sidetracks but I have quesitons

Bb1mind or rather don't use it when I have this case, I don't like the motion on anchor ...

JWodeOP•2/8/23, 9:53 PM

Yeah, I just knew the client (my friend) would love it

b1mind•2/8/23, 9:53 PM

First you arnt using anchors

b1mind•2/8/23, 9:54 PM

Like Nav > with no ahrefs servs no purpose, not good practice for nav when you have access to actual anchors

b1mind•2/8/23, 9:54 PM

Don't lean to heavy on JS till you need too

b1mind•2/8/23, 9:54 PM

Leverage the native API

b1mind•2/8/23, 9:55 PM

ScrollIntoView I think always "scrolls" with motion

b1mind•2/8/23, 9:56 PM

So the Preferred reduced motion and css you have get skipped in this case.

JWodeOP•2/8/23, 9:58 PM

Nah, I think ScrollIntoView jumps directly there without doesn't it?

JWodeOP•2/8/23, 9:58 PM

also, 'whoops' on the a tags

JWodeOP•2/8/23, 9:58 PM

JWodeOP•2/8/23, 9:59 PM

so i should be able to ditch scrollintoview. but that doesn't fix my issue if i want to keep the scroll effect, does it?

b1mind•2/8/23, 9:59 PM

You have to pass the object to tell it in js

b1mind•2/8/23, 9:59 PM

o maybe reverse idk I can't seem to changes it behavior.

b1mind•2/8/23, 10:00 PM

To the point though use a real nav > ahrefs with anchor tags, period

b1mind•2/8/23, 10:00 PM

Even if its not a solution to start its the right start

b1mind•2/8/23, 10:01 PM

Also yes it should also skip scrollTrigger events though (cause it is going to snap right to the anchor)

JWodeOP•2/8/23, 10:01 PM

yeah will do. this is my first time using scrolling like this so didn't really consider that would work

Bb1mind Also yes it should also skip scrollTrigger events though (cause it is going to s...

JWodeOP•2/8/23, 10:01 PM

really, that's interesting, but it will still scroll down the page?

JWodeOP•2/8/23, 10:01 PM

i'll give it a try now

JWodeOP•2/8/23, 10:01 PM

thanks

b1mind•2/8/23, 10:01 PM

only with

JWodeOP•2/8/23, 10:02 PM

yeah that's what i'm currently using

JWodeOP•2/8/23, 10:02 PM

nice, ill try it

b1mind•2/8/23, 10:02 PM

again you would be utilizing that where as now I don't think that currently works with what you ahve now

b1mind•2/8/23, 10:02 PM

cause you are using JS to scroll, with scrollIntoView()

b1mind•2/8/23, 10:02 PM

JWodeOP•2/8/23, 10:02 PM

feels weird that scroll trigger won't pick that up, but I'm not going to argue if it works!

b1mind•2/8/23, 10:04 PM

idk ScrollIntoView() support is weak cause Safari options it looks like and I think if you were to use scrollTo() it does not act the same

b1mind•2/8/23, 10:04 PM

b1mind•2/8/23, 10:05 PM

Like don't even look like safari support the options object for it

b1mind•2/8/23, 10:05 PM

Either way use the platform and make better html navigation. Its a better start, then enhance that

b1mind•2/8/23, 10:07 PM

You can also leverage in css if you use anchors

b1mind•2/8/23, 10:07 PM

https://codepen.io/b1mind/pen/bGVemWx (you can also disable the scroll-behavior here and see how it snaps not scrolls)

JWodeOP•2/8/23, 10:15 PM

ah, are you telling me that scroll-margin-top wasn't working because I was using JS

, well that's 1 issue fixed!

JWodeOP•2/8/23, 10:16 PM

cool demo, thanks

JWodeOP•2/8/23, 10:16 PM

a tags do seem to trigger scrolltrigger though, annoyingly

JWodeOP•2/8/23, 10:17 PM

(have updated my pen)

JWodeOP•2/8/23, 10:17 PM

https://codepen.io/nwoodward/pen/NWBmZgd?editors=1011

CodePennick

In Viewport Menu

...

b1mind•2/8/23, 10:20 PM

Ok but now least you have a good start

JWodeOP•2/8/23, 10:21 PM

yeah true, and being ignored was on my to-do list, so thanks!

JWodeOP•2/8/23, 10:21 PM

padding/margin

b1mind•2/8/23, 10:22 PM

Another sidenote would be using Sticky if you can for the nav vs fixed. It will save that space in the dom for the first section not to sit under (if you have that issue)

b1mind•2/8/23, 10:23 PM

sticky does have its limits and gotchas though

JWodeOP•2/8/23, 10:25 PM

yeah, I've a class I use for that first section

I'll give sticky a shot