una

... works a dream! Thanks again to you both, not only for your generous work on solutions, but also for the informative insights on working with GSAP!

Sorry, I can't seem to get this working ... https://codepen.io/fatcatsanonymous/pen/gOyaVOj

Thanks to you both - you're so fast! I had tried adding the Scrolltrigger.refresh to the toggle function but this doesn't work somehow. I assume also it will refresh all scrolltrigger markers from other animations on the page in question, which is not great either. I guess I'll look into using GSAP to rebuild the menu dropdown and go from there. ... haven't really figured outhow to tap into those superpowers that I now have, though!

I'm back on this issue again. I'm trying to refresh the marker positions when a submenu is opened. I've added a submenu dropdown script with a ScrollTrigger.refresh() but this is not working for me. https://codepen.io/fatcatsanonymous/pen/gOyaVOj

Hi Thanks so much for this. The fixed values were exactly my issue. @mvaneijgen kindly helped me out with the second loop which was my initial problem. So many thanks to both of you for your expertise and help!

Hi, Sorry should have shared my last results, but I haven't really gotten anywhere aside from adding/changing some fixed values to your solution . I don't really know how to generate these... https://codepen.io/fatcatsanonymous/pen/JjzgpJJ

Hi, I'm still not getting anywhere with the offset. Even playing around with the fixed values isn't positioning the markers correctly.

Hi mvaneijgen, Thanks so much for this. I don't quite understand the offset though. Regardless how I set these values, The markers are not in line with the nav items... Regarding mix-blend-mode, I had thought of using this as a simple solution too, however as it is a fixed navigation above not within the background sections, the background-colors of the sections have no relation to it so this won't work. As I have GSAP incorporated anyway for other animations it seemed the best solution to use it for the nav also. I'll post the results.

Hi, Thanks for this tip. I did watch this tutorial already actually, but it doesn't solve my issue unfortunately. I added a codepen above to show where I'm at. The nav item color is changing but I would like each instance to change as it enters the section. Otherwise, as the user scrolls and is halfway through the navigation you have white links on white background.

Hi, I am trying to change each nav item color from white to black or back depending on the section class (i.e background color) behind it. The navigation is fixed as the content comprised of sections with class="section-white" or class= "section-dark" scrolls beneath it. The script below changes all links simultaenously. Has anyone any suggestion as to what I am doing wrong? Thanks! const sections = gsap.utils.toArray('.section-white'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, duration:3, start: 'top 300px', end: 'bottom 80px', scrub: 1, toggleClass: { targets: '.nav-link', className: 'text-black' }, markers: true, }) });