How to create wavy underline on hover

How do you create this hover animation where the wavy line underneath links move on hover?

I checked out their read-only site in the Designer and couldn’t see any interactions on the link components. It looks like the wave is a png set as the background-image on the link. Any suggestions on how to animate this?

Thanks!

2 Likes

I am also wondering this…

@marinatedme @Storm_WB

This is really simple actually. But you do need to add some custom jQuery code.

I recreated it here: Change background-position on .hover() with jQuery - scrolling background image - JSFiddle - Code Playground

Hope this helps.

Here is my mate @PeterDimitrov implementation. Simple enough.

1 Like

I’ve been trying to implement this and I can’t figure it out. I was hoping you could point out where I’m going wrong? I’ve copied the section into this link:

https://preview.webflow.com/preview/wavy-line-roadblock?utm_medium=preview_link&utm_source=dashboard&utm_content=wavy-line-roadblock&preview=88a34985178b645bc6306fbcf7ef62d5&mode=preview

I’ve come up with two solutions to this here. Feel free to clone the project :slight_smile:

2 Likes