Hi favorite community,
I am looking for a way to control the color of my brand/ logo based on the background or based on a mask.
Example: Sketchin | Design for Futures - Lugano, Milan, Rome, San Francisco
Do you know a way to achieve this effect natively in webflow?
Thank you!
Seems like what’s happening there is some z-index trickery but I’m not sure. Seems like there’s two copies of the left sidebar - one with color and black text and one with white logo and white text and they overlap the different sections. Not sure how it’s done exactly though.
It uses a deprecated technique called Clip and uses two menus on a scroll interaction. It toggles a “block” for the light menu variant which is “display:none” until you reach the anchor. The Clip holds the other menu in place.
I’d say you could easily replicate such a functionality with the hover-scroll, effect other element, and change not the whole menu, but just the icon. Seems far less invasive.
See example 1 or 2 here.
Most important: don’t use a transition time, which is default 500ms.
Thank you guys for your answers. I think, I got it:
https://webflow.com/design/limits?preview=5657594a7c868824cae152e4cfb0013f
This works without js/ scroll triggers:
Logo bright: z-index 100
Background dark: z-index 50
Logo dark: z-index 10
Background bright: z-index 1
The Section, that display the alternative logo is set do overflow hidden and contains copy of the menu with the alternative logo.
Keep up the good work!
Damn, I love webflow 
Don’t mind the button, I am testing a version, that controls this effect using the native triggers.