Clipping a fixed element not working as expected

Design help General
1

Hope you guys can help. :weary:
Trying to achieve the reveal effect found here:

I have two sections.
Section 1 holds the GREEN logo, fixed position, inside an absolute position wrapper.
Section 2 holds the WHITE logo, fixed position, inside an absolute position wrapper.
Both sections are set at 100vh.
So, as the page scrolls, the green logo should get clipped and the white logo should reveal.

But it’s not working!

Here is my site Read-Only: https://preview.webflow.com/preview/27by40?utm_medium=preview_link&utm_source=designer&utm_content=27by40&preview=556d46ead9b5f9654c33d52188a09774&workflow=preview

2

hi @27by40 you have camel case name in class that is not allowed on CSS all names has to be lowercase. when you fix this name to lowercase (viz. image) all will work as expected.

CleanShot 2021-06-08 at 12.18.42

This is one thing that WF should not allow as it “teach” no-coders bad habits. WF should follow CSS standards and not allow to type any other form of text into CSS name input field as camelCase, spacing, Capital letters. They should allow ONLY lowercase or just auto-format on fly. Worst thing is that WF show this bad class naming even in their tutorials. So I’m not surprised that you can’t make it work.

3

God bless!
What a headache you fixed. Thanks. :+1:

1 Like
4

If you @27by40 don’t have further question to this topic feel free to close your request.

5

I ticked the “Solution” box. Is that the way to close this out?

1 Like