Animated Wave Section Devider

[jo85]

hello all,

is there anyone out there who can explain to me how this ripple effect works when transitioning the sections of this page: https://sharevp.webflow.io/

I would be super grateful for the matching GSAP code

greetings from berlin

[PointC]

Looks like they have a waves section with two SVGs in it and then they animate the wave container div along the x axis. You can inspect the CSS to see how they've lined up the images.

 

 

There are multiple ways to go about it. x translation, morphing, animate individual points of the wave. All can work. You would just use the same fill color for the waves as the next section of the page and it'll look like the waves are along the top of it. There are many wave animation threads around the forum. Here's one to get you started.