Using ToggleClass with multiple Nav's

[MediaShmedia]

Hi!

I feel like I'm missing the obvious logic piece here but it's escaping me... With the browser at 800px and up the active class gets applied as expected to the Desktop Nav, but only scrolling down. <800px, the class is applied to the Mobile Nav, but only when scrolling up?

 

Thank you so much, would appreciate any insight you could provide

See the Pen KKEvyNa by MediaShmedia (@MediaShmedia) on CodePen

[Toso]

something like 

 

See the Pen xxjErmp by GreenSock (@GreenSock) on CodePen

[MediaShmedia]

I'm sorry I'm not following? The issue arises when there's more than one nav - and so the script that the original pen uses breaks, and I'm trying to figure out why

[Toso]

I'm a little confused about your code, you are using 2 navs you can use only 1 nav since both of them are the same thing nothing different,

 

or if you planning to use another nav for example with a different layout or something inside the mobile you can use matchMedia to add different animations for it 

[MediaShmedia]

Hi - the two nav iterations are for desktop and mobile, with only one shown at a time.  I had tried matchMedia (as in the following pen) without success, so just trying to figure out the issue.

[MediaShmedia]

[MediaShmedia]

Is there anything else that I can add to help illustrate the issue - the ScrollTrigger is not applying the active class to the 2 nav menus as expected - it's only applied on scroll down on desktop, and scroll up on mobile...

[Rodrigo]

Hi,

 

If you run this in your code you'll see the issue:

let links = gsap.utils.toArray("nav a");
console.log(links); // array with 10 elements

Your links are 10 and the sections are just 5, so you're creating duplicated ScrollTrigger instances that toggle the class twice, see the problem?

 

This seems to work the way you intend:

See the Pen LYajMVw by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps

Happy Tweening!

[MediaShmedia]

Yup, that was it. The CSS guy in me assumed display:none prevented render of one of the Triggers. Lesson learned - appreciate it

[Rodrigo]

Hi,

 

A little clarification regarding this:

13 hours ago, MediaShmedia said:

The CSS guy in me assumed display:none prevented render of one of the Triggers.

The triggers are not the links, the triggers are the panels. The point is that we get the id of each panel from the href attribute of each link:

let element = document.querySelector(a.getAttribute("href")),

That gets the attribute of the <a> tag which is a string: #one, then we look in the document for an element with that particular ID, which is the panel.

 

Finally display: none means that the element is not visible and removed from the document's flow, but is still in the DOM so it can still be selected.

 

Hopefully this clear things up.

Happy Tweening!