Hover Line Animation

Design help Animations & Interactions
1

Hey Everyone,

I’m trying to recreate this hover state I found on an agency website. Any idea of how this can be achieved in Webflow?

circle-draw

Here is the link to the full site if you’d like to inspect the code. Hope to hear from a few of you! :grinning:

Edit: Can’t seem to make the gif large but if you go to the site and hover over one of the nav elements you’ll see what I’m talking about :grinning:

Thanks!
-Mason!

2

You can create an animation in After Effects using the Trim Paths effect, then export using Lottie / Bodymovin, and use a hover interaction in Webflow to play the Lottie animation.

Here’s a Trim Paths tutorial, and there’s lots of info on Lottie in the forums here.