helleFeed

That's odd. Here there's a huge difference in Safari v 17.0 and Chrome. Glitching in safari but no other browser. I'm also on macOS 14.0.

Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?

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.

Here's a codepen: https://codepen.io/helleholmsen/pen/yLJjRdG

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;