link to section demo issue

[pirco]

the demo for anchor links to sections isn't quite working for me.  assuming that the individual menu items in the nav should highlight according to the section being displayed in the viewport, only the first and second menu item get highlighted but the second menu item stays highlighted when you keep scrolling. even when you use the anchor links to scroll to sections 3, 4 and 5. this is in chrome 105 and safari 15 on mac. 

 

or is it just me?

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

[Rodrigo]

Hi @pirco and welcome to the GreenSock forums!

 

It's like that by design:

// --- RED PANEL ---
gsap.from(".line-1", {
  scrollTrigger: {
    trigger: ".line-1",
    scrub: true,
    start: "top bottom",
    end: "top top",
    onEnter: () => setActive(links[0]),
    onEnterBack: () => setActive(links[0]),
  },
  scaleX: 0,
  transformOrigin: "left center", 
  ease: "none"
});


// --- ORANGE PANEL ---
gsap.from(".line-2", {
  scrollTrigger: {
    trigger: ".orange",
    scrub: true,
    pin: true,
    start: "top top",
    end: "+=100%",
    onEnter: () => setActive(links[1]),
    onEnterBack: () => setActive(links[1]),
  },
  scaleX: 0, 
  transformOrigin: "left center", 
  ease: "none"
});


// --- PURPLE/GREEN PANEL ---
var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".purple",
    scrub: true,
    pin: true,
    start: "top top",
    end: "+=100%"
  }
});

As you can see the ScrollTrigger instance for the final panels doesn't set the active class on the links.

 

Happy Tweening!!!

[pirco]

now it all makes sense!

thank you

[GreenSock]

I'm actually not sure who built that, but here's how I assume you wanted it to work: 

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

 

Notice I'm using a standalone ScrollTrigger to track each section (when its top would hit the top of the viewport) and then just tap into its "start" value to scroll there. I'm also toggling the active class when the sections hit the middle. 

[pirco]

that is EXACTLY how I assumed it would work. this is fantastic, Jack. Thank you.

 

 

you could replace that demo with your new one