ScrollTrigger: changing the logo colour depending on the page background colour immediately behind a specific point

[Mark Howells-Mead]

I apologise that this question and topic has been addressed in several different ways, but I'm going to need to ask again because none of the situations and solutions cover precisely what I'm looking for. I need to swap the colour of fixed navbar according to the background colour immediately behind it, without being able to know the HTML structure of the page. SVG filters will only go so far, as there is other content besides an SVG logo in the navbar.

 

The requirement is for a transparent navbar containing a logo and other elements to change between light and dark modes when the background behind it is dark or light, so that the navbar content remains visible. There are plenty of solutions online—both with and without GSAP—which solve this by watching an array of sections on the page. A comparatively simple ScrollTrigger solution I've put together on this basis works well.
 

The problem I face is that there are no regular sections to the page, so there is no CSS selector I can apply which will catch every scenario. Sometimes the element with the background color is a direct child of the main content column; sometimes it's nested four levels deep. Sometimes it's a background colour, sometimes it's a background gradient or background image. I cannot affect the HTML being output by the CMS to a sufficient degree that I can ensure regular sections. 

 

The idea I've had is to monitor the background colour of a specific point in the browser window (e.g. top left with a 30px offset) using JavaScript (and perhaps a canvas element), then use this measured value to decide which CSS rules to apply to the navbar.

Is this even possible? Thank you for any suggestions you might be able to provide!

[elegantseagulls]

I've found that adding a mix-blend-mode: difference to the logo is often 'good enough' (it's what we use on https://www.elegantseagulls.com/) so long as the logo is black/white, other wise, it's going to be a performance suck on each tick/scroll to measure the color of the pixels right behind the logo. This will get even tougher with background-images and gradients. If you just had a dark/light mode colors for the logo, you could add an option in the CMS for each <section /> for logo-overlay and use ScrollTrigger to adjust to that via onEnter/onEnterBack, or you could have scrollTrigger trigger a gsap.getProperty() (https://greensock.com/docs/v3/GSAP/gsap.getProperty()) to get the background-color of the section and adjust according to that. But I'd very much advise against watching every nested element on a page, as that's going to be a performance suck.

[Mark Howells-Mead]

Thanks for the suggestion - I get that there may well be a performance issue. But I'd like to find out for sure… if there is even a possibility to measure it in this way. :)

 

As I say, there are no regular sectionelements. Some of the content is wrapped in a section so that it can receive a background gradient, but other parts of the content are direct “children” of the main content area. It's impractical to have the editors mark each section manually, as they're not sufficiently au fait with such complexities. Using onEnter/onEnterBack might be a solution, but I'd need to track entering and leaving each potential area, and handle “instant” cases where triggering areas are right up against each other.

 

The mix-blend-mode route (added with a grayscale filter) might be enough, I'll have to take a closer look at that to see whether it's good enough…