Streaming live at 10am (PST)

Change Color Based On Background Color

Hey everyone,

With the help of some experts – does anyone know how to achieve this awesome navbar transition effect? https://halo.cool/en

My initial hunch was that it was mix-blend-mode, but after looking at it further and based on the way the rest of the page interacts with it, it seemed unlikely. This effect also works in Edge which as far as i’m aware, doesn’t support this CSS property. My alternative guess was some form of layered z-Index and potentially 2 fixed overlapping navbars nested within different sections with overflow set to hidden. It seems extremely complex to me at face value and can’t really understand how this process may be working.

Does anyone have any idea how to possibly achieve this? I’ve tried exploring the forum and I’m getting a bunch of mix-blend-mode answers but it really seems unlikely to me.

Hey, @Jhart4595 If you go to a page and scroll down very fast, before the whole page loads, you can notice the change of color happens BEFORE the colored background appears. Which means that it is 100% NOT blend mode. The idea of z-index, tho was also my first guess, would be waaay too complex to achieve, plus you might have to create multiple buttons and have messy pages.

Now I have no idea if there is some “if background color this then change color to that” kind of code, but if I were to pick a (rather wild) guess on how to do it otherwise, here is how I would go about it:

  1. Make sure you set your menu button at a fixed percentage of the total height, then the height of the button would also be fixed and calculated. If the button needs to have a fixed size (like on the website you shared), you can add a CSS rule: calculate X% + XPixels. So now, you can always know where the where the bottom of the button rests within you page. Let’s call this calculated position (Y).

  2. Create a “swipe up” kind of color change (should be easy to find, you can even do that in webflow by adding different colored divs within one main circle).

  3. Now, select the section with the new colored background, and let it have a trigger to play the swipe animation.

  4. Set the trigger type to be a while scrolling into view trigger. The beginning of the trigger would be the 0% of the animation, and the end of it 100% of the color change.

  5. Finally, let’s go back to the (Y) position that our CSS calculates. Simply offset the trigger (of the scroll into view) to begin on (Y) position. (Or…100% - Y…I’m not sure how it should read). The ending of the animation will of course have to be the X% (top of button). That way, as the colored background scrolls “into” the button, the swipe animation plays and ends perfectly with it, and while scrolling back up it also plays in reverse.

Disclaimer: I’m a designer not a developer, and I have absolutely no idea if this works :laughing:, but it’s the only thing I can think of (and you can do most of it in webflow, and just add the calculation rules as custom code and/or by creating and adding a custom CSS and .JS files). I hope this helps, or at least helps you think of a better idea. Do let me know what the answer will turn out to be!

Thank you for the thorough and detailed input @Mr_Finn! I’ll be sure to give this a try…the beautiful thing about visual development like this, or some modification of it is that once you solve the problem, you’ve solved it for future problems and can basically copy/paste with a few tweaks here and there. Sadly this has been a hurdling point for me for a few days lol. But there has to be a solution. I tried looking at DevTools as well and I recall seeing some calculations taking place, so this may be a similar/exact solution.

1 Like