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)
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:
Then give it a class and work on the x repeating bg with the asset:
Here is the image:
https://dl.dropboxusercontent.com/s%2F8e1k7bdebcejuif%2Fasset-wave-seamless.svg
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
And don’t stop there!
Select one of the link, and add that transition
Now activate the hover state
Edit the bg and make it move right or left, try 170%
Go back to the normal state and edit the transition, make sure it’s ease in out
Now hover your links, enjoy the wave
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
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
This is gold! Thanks for sharing!
Thank you so much Vincent!