How to animate wavy border

[Shark]

Hi, 

 

Can anyone tell me where could find such a solution (onhover wave border) ?

https://waaark.com/

 

What is that kind of animation name? 

It is rather css animated or used gsap?

OR both?

 

Any suggestions?

Thanks

 

[ZachSaucier]

Hey Shark and welcome to the GreenSock forums!

 

It's unclear exactly what effect you're talking about. If you're asking about what they use for the page transitions and such, it makes use of SVG. It's not clear exactly how they create the effect but the gist is:

• Create an SVG where it covers the canvas however you'd like it to. 
• Modify the SVG to also include the same paths but not covering the canvas on either end of the direction in which you want to animate.
• Animate between those three states, probably using MorphSVG.

[Shark]

Sorry for the unclear description. 

 

Thanks for asking this one is also good and I can try it.

But I thought after this page renders loading screen. There are three blocks WORKS, VISION, STUDIO and if we move our mouse there then each block border moves like wave. How this is made or how this can be made with gsap or css?

 

[ZachSaucier]

Oh I see now. 

 

There have been a couple of threads asking about that effect already: