Streaming live at 10am (PST)

SVG Wave transition between sections (responsive)


#1

Hello!

I’ve been enjoying trying out Webflow so far. But i have a problem, maybe you can help.

Section 1 (light grey): Header contains navbar with logo, navigation and buttons.
Below navbar are two collumns. Left one with text and buttons, right one - with photo (bottom cut off).

Section 2 (transition): Experience section with years of experience.

Section 3 (white): Portfolio section.

The header section (1) background should be light grey and portfolio section (3) background - completely white. While the experience section in between (2) would be transition from grey to white in a form of waves. The content of experience section (2) would be on that transition. So the wave would be like a background.

I created white wave in Illustrator and exported as SVG. I want top op that wave covering the bottom of a photo in Header section (1) to hide the cut off part. I managed to do that on desktop version, but it doesn’t scale well for tablet and mobile versions. It’s hard to make it responsive - my header photo moves under text in Column 1, cut-off bottom of a photo becomes visible as SVG wave scales, experience years disappears, you get the idea.

Maybe you have an idea how to achieve this? Maybe there’s better way than using an SVG?

Thank you!

Here is my site Read-Only: (deleted it)