Wavy effect bellow link

Hello Webflow’ers

Does anyone know how to create this wavy effect bellow links?

check https://www.helloheco.com/

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Select a word, and span it (the brush icon). Then deselect, reclick on it and give it a class.

Now you need to prepare a looping (seamless) pattern (half a wave) It need to loop nicely on the x axis.

You’ll declare that pattern as a x-repeating background image.

Image like this, I made it for the demo I can give it to you:

So select and click on the brush:

image

Then give it a class and work on the x repeating bg with the asset:

image

Here is the image:

https://dl.dropboxusercontent.com/s%2F8e1k7bdebcejuif%2Fasset-wave-seamless.svg

3 Likes

I didn’t get you wanted this style for links, but it’s the same, links in a text aren’t different than span text. Just click and give a class.

By the way you can check the page here: https://sbx.webflow.io/wavy-underlines

And the read only link here: https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&pageId=5d974024b3e1727054d4064f&mode=preview

1 Like

And don’t stop there!

Select one of the link, and add that transition

image

Now activate the hover state

image

Edit the bg and make it move right or left, try 170%

image

Go back to the normal state and edit the transition, make sure it’s ease in out

Now hover your links, enjoy the wave :wink:

The best waves…

Adjust as desired, I went down to 70% shift instead of 170.

Edit: lol, I just checked your example and that’s what they do, they animate the hover too :smiley:

They do it differently by applying a loop motion so it never stops. You can do that with just Webflow UI but you can add a simple custom code to achieve this. Google bg displacement

3 Likes

This is gold! Thanks for sharing!

1 Like

Thank you so much Vincent!

1 Like