Is this text hover effect possible natively in Webflow?

Design help Animations & Interactions
1

Hey all,

Just came across this hover effect I might be interested in adding to one of my sites. I couldn’t quite come up with non custom-code solution to achieve the same text hover effect. If anyone has an idea to natively accomplish this in Webflow, please let me know!

Text Normal

image
image1720×390 29.2 KB

Text Hover

image
image1734×426 30.6 KB

I don’t have a read-only link as it’s just an idea, but if I did, I would include it :slight_smile:

Thanks everyone!

EDIT:

I figured out how to get some of the hover effect working. I created a text span and added a background linear gradient to the span to get the normal state with the underline. Then, on hover, I changed the linear background to cover more of the container. However, I can’t seem to smooth out the transition of the 2 different backgrounds. Any help is appreciated!

https://www.loom.com/share/ee39443ccfbc4645b42cd6988a6bcd34

2

Update to mark this as solved:

I figured out how to achieve this natively in Webflow. Instead of backgrounds, I added an inner shadow to the element’s normal state. Then, I added a different inner shadow on hover. Then I added a transition to the background shadow. Still some tweaking to do, but it’s definitely doable, so good to know!

https://www.loom.com/share/6fb8fd0632dc41e5a696e556712f9494