Hello Webflow forum. It seems I have a problem related to hover animation.
I did an underline animation while hovering on the link div, but when I open a preview or a website itself the underline are there before I hover on it and it only disappear and work correctly after I move my mouse out of it(
Sure. Just took a peek. Essentially, using scale is what’s causing the difficulty here. Here’s what I would do.
On the Underline element, remove the border, set the width to 0px, and maybe increase the height to compensate for the thickness the border was providing.
Create a new hover interaction (or edit your existing) with no scaling, but that instead increases the size of the underline element from 0% width to 100% width.
That should give you the result you’re looking for, I think. Let me know if this takes care of it for you!
Hello, it’s me again. I have a similar problem with my menu button. I’ve tried everything u said, but still unsuccessfully. I just don’t know what to do
Hey again George! The issue with this one is that both of your interactions (Fries In / Fries Out) have initial states attached, which means “this is the state the item should be in before the animation”, so it’s just defaulting to the second one. If you remove the initial state from Fries Out, so all you’re left with is the instruction to decrease back to 18px, it should work as intended.
Hmm… That’s strange but worked, although I have two initial states in underline animatihin with which I had problems earlier in this topic. And now I have delay in animation after moving my mous of the menu button
Your underline animation does have two initial states, but I believe it is ignoring the second one because it does not have a value set. You would likely see the same conflict if this was corrected.
The delay is because you still have two actions in the second interaction. You don’t need to define the out animation’s 29px size, because it is already 29px. This is what it should look like: