How to hide and reveal fixed elements with clip-path?

Design help Custom code
1

Hello everyone,

These forums have been a great help for me on multiple occasions and so, having hit a bit of a wall of my own, I thought to check in with you, the fabulous Webflow Community!

I would like to achieve a behaviour as seen on:

Essentially, how the fixed “Invision presents” changes appearance when scrolled past the 100vh opening. I believe they’re masking using the “clip” property, but working out exactly how, and how one would set up their own site to achieve such a thing has proven a little too much for my (lacking) knowledge / experience.

clip

Anyone out there able to lend a hand? It would be very much appreciated!

Thanks very much,

James

2

So, after some tinkering, I managed to achieve the same effect, albeit not in the same way. I dived deeper into the “Design Better” example referenced above and encountered various levels of css selectors and other sophisticated syntax - too much for me to decipher.

My rudimentary method was to assign a clip-path to each section, and then reproduce the fixed elements (but with differing styles, such as text colour) inside each section, also. That way, only the appropriate fixed elements would be revealed within the clipped area which, in my case, is the section’s perimeter. As the fixed elements are, in each instance, positioned in the exact same place, the transition between seems to work seamlessly.

The clip-path:

.section-1, .section-2, .section-3
{
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}

This might not be considered best practice, and may not stand the test of time/cross-browsers, but, for now, it works.

Phew.

2 Likes