Need sticky to work, but also parent overflow to be hidden

Hey there, I have a site that has to things that seem to disable one another.

As it’s known, elements that are sticky, need to have their parent element to be overflow:visible; so be it, but I need my decorative element (in this case large white gradient SVG) to fit the viewport and not cause horizontal scroll because of the overflow.

How can I make both things work? Setting page-wrapper or main-wrapper to overflow:hidden just disables sticky positioning.


Note: it’s the “How it works” section with steps card and the timeline.

Here is my site Read-Only: Webflow - Humble Education

Hey Karlo!

We’ve made a YouTube video which easily solves this exact problem!

TL;DR: Use custom properties to set overflow to clip :)