Hover state already initiated when the page loads

Design help Animations & Interactions
1

Hello webflow hackers,

I’m trying to implement this button animation using link blocks, and when the page loads the HoverIN state is already initiated. When you hover over the “Read Article” button, then the state is released and the animation behaves as normal.

The button is question is the “Read Article” down in the article section.

https://preview.webflow.com/preview/youvelop?utm_medium=preview_link&utm_source=designer&utm_content=youvelop&preview=af69a38962a86c88e2e4b5776db53a99&workflow=preview

I have implemented many animations before, I don’t understand why is this happening.

Thank you for your help. Appreciate it.

2

Howdy @Elicrespo and welcome to the community! :wave:

The issue is that you’ve declared some initial states on your hover out interaction that are conflicting with your initial states on the hover in interaction:

image

Removing those fixes the issue and prevents the buttons from starting in a “hovered” state:

webflow-fix

3

Thank you so much, @mikeyevin, you are the champ. Solved.