Best Practice for Inverting Fixed Menu Elements on Scroll w/GSAP

[Windpixel]

I have a solution, but its not very robust and im sure this is a common thing that has been solved many times before, so asking you guys.

Throughout most sites there are dark and light sections and when a fixed header has a transparent background, I want to flip/invert or change the menu elements so they contrast.

In the min demo below, I have used the "is-light" class on a section to act as a trigger for the toggle event, although in the event that the hero section (top of page) is already a light background, the menu items wont toggle until a scroll event occurs to "check".

Im sure there is a more robust solution, so wanting to hear what is the best thing  Thanks in advance.

See the Pen BabBREJ by windpixel (@windpixel) on CodePen

[mvaneijgen]

Just offset the ScrollTrigger by 1px, so that it also checks on page load. Also shouldn't you be looping to through the .is-light sections, instead of the menu elements? I've tweaked your CSS and JS a bit, the class is put on the .header and the CSS updates the elements inside the .header. I also loop through the .is-light elements, so that a ScrollTrigger is created for each section on the page. Hope it helps and happy tweening! 

 

See the Pen MWxwNXg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

On top of @mvaneijgen's great advice, this video by @Carl should be a good resource to achieve this:

 

Happy Tweening!

[Windpixel]

Thanks 

• mvaneijgen and Rodrigo, Will do a hybrid of both these suggestions