Streaming live at 10am (PST)

Create this subtle hover animation


#1

Hi everyone, I’m trying to recreate this hover interaction on webflows blog page. More specifically, the interaction you see when you hover over one of the reading list boxes i.e., freelance, essentials, etc

I’d like to apply this full interaction onto my buttons in my design system. The y-axis movement, the shadow effect, and the overlay w/ the same ease-ing.

if anyone know how to achieve this I’d love to hear about it. thank you.

here is the read-only link to the style guide I’m working on. You can find to button in the components section: https://preview.webflow.com/preview/newbook-styleguide?preview=d911541d5a8d9ef13ae8de1a0eff5178


Here is my public share link: LINK
(how to access public share link)


#2

You have them already on your Typography section don’t you?


#3

So it turns out I was staging the interaction incorrectly. I needed to move the button on the transform section instead of the Top section.

Initially this was resulting in a linear interaction regardless of the easing. Once I correctly set the y-axis shift in the transform section the ease started working correctly. The button works great now

Webflow sent this over which was helpful: https://university.webflow.com/lesson/advanced-button-styling-elements


#4

Cool. Bet. Have fun then, take care!