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…

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!

Thanks for your feedback on this! I worked out that the easiest way to do this is to handle it in two separate elements. The first is a 100vh container set to position:absolute and a CSS class on the body to block scrolling. When the user clicks on a button inside this hero element, the element gets hidden by tl.to() and a height of 0, revealing the next page section. The onComplete event then removes the scroll-blocking CSS from the BODY.

I'd like to build an element — hopefully using Greensock for the first time — in which a scroll trigger within a screen-filling cover element blocks the page scroll, then swaps out the displayed content to show a different DIV. Once that is on display, then the page can be scrolled as usual. I seem to think that I've seen this kind of scroll override from time to time, but does anyone have an example of where this has been done, or how to achieve it? Thanks so much for helping a newbie out!