Wavey effect around edges of element

[JoeH]

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.

[ZachSaucier]

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. 

[JoeH]

Hey @ZachSaucier

 

Thanks for the reply, was worth a shot!

 

I'm now wondering about this effect -> https://www.buddha-jones.com/

When you click on the hamburger icon to open the menu, I believe it uses a clip path animation?

[ZachSaucier]

2 minutes ago, JoeH said:

I believe it uses a clip path animation?

Yep