Jump to content
GreenSock

JoeH

Wavey effect around edges of element

Recommended Posts

Hi all,

 

Just wondering if anyone could tell me how this effect is done on this website -https://shapestudio.co.uk/

 

It occurs as the page loads after the black section swipes upwards, as you can see the central section which is revealed has wavey edges but then animates and goes straight as it expands to fill the window.

 

I'm guessing this is an SVG effect, but was hoping it could be done with a regular old div.

 

I would be greatful if anyone knows which plugin can achieve this.

 

Thanks in advance.

Link to comment
Share on other sites

Hey Joe. 

 

7 minutes ago, JoeH said:

I'm guessing this is an SVG effect, but was hoping it could be done with a regular old div.

It definitely cannot be done with regular divs, haha. It's done with WebGL. It's not a trivial task to create custom things like that. I would recommend looking up WebGL projects on Codrops. 

Link to comment
Share on other sites

2 minutes ago, JoeH said:

I believe it uses a clip path animation?

Yep :) 

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.
×