ScrollTrigger active toc

[helleFeed]

Hi! I'm using a combination of scrolltrigger and scrollto to have active classes when scrolling to a the current section. If the section is active, the colors of the nav should go from gray to black and reverse when not active. I have two problems: it doesn't seem that the animation starts on the top of each section, but maybe 20px below the top of each section, and it doesn't always go back to gray when scrolling past it. Do you have a good example of this? The effect I want is like tocbot (here), and here's my code:

 

import gsap from 'gsap';
import ScrollToPlugin from 'gsap/ScrollToPlugin';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

const scrollTo = {
  init: (app) => {
    const navLinks = gsap.utils.toArray(".sticky a, .sticky-nav a");
    const sections = gsap.utils.toArray(".section");

    navLinks.forEach(function(a) {
      a.addEventListener("click", function(e) {
        e.preventDefault();
        gsap.to(window, {
          duration: 0.6, 
          autoKill: true, 
          scrollTo: e.target.getAttribute("href"),
          ease: 'quart.inOut',
        });
      });
    });

    sections.forEach((section, i) => {
      const active = $(".sticky a[href$='"+$(section).attr('id')+"']");
      const sectionTrigger = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "bottom bottom",
          toggleActions: "play none none reset",
        }
      });
      sectionTrigger.fromTo(active, {
        color: '#828282', 
      }, {
        color: 'black',
        ease: "sine.out",
        duration: 0.2,
      });
    });
  }
};

export default scrollTo;

 

[ZachSaucier]

Hey helleFeed and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

I don't see anything wrong based on just the code that you provided. Can you please create a minimal demo that shows the issues you're talking about?

 

[helleFeed]

44 minutes ago, ZachSaucier said:

Hey helleFeed and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

I don't see anything wrong based on just the code that you provided. Can you please create a minimal demo that shows the issues you're talking about?

 

 

Here's a codepen: 

 

See the Pen yLJjRdG by helleholmsen (@helleholmsen) on CodePen

[ZachSaucier]

I don't see either error that you mention in that pen. Can you please try to more clearly describe how that pen creates the errors that you're wanting to fix?

[helleFeed]

1 hour ago, ZachSaucier said:

I don't see either error that you mention in that pen. Can you please try to more clearly describe how that pen creates the errors that you're wanting to fix?

 

Yes, so the "active" switch should happen once the toc hits the section (the black line), and it should go back to gray if it's not active anymore. Right now it still seems like the first item is active when I have scrolled past it. 

[ZachSaucier]

The toggleActions are controlling that in your current setup and the toggleActions are doing exactly what you're telling them to do.

 

"play none none reset" mean play when the trigger is entered, do nothing when it leaves or enters back, and then reset when it leaves back. I think you want this instead:

toggleActions: "play reverse play reverse"