Jump to content
GreenSock

jo85

Animated Wave Section Devider

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

 

eORQdHy.jpg

 

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×