Some hover animation issues with showing up before it starts

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(

Read-only link (Watch on 1919px): https://preview.webflow.com/preview/itsgeorge?utm_medium=preview_link&utm_source=designer&utm_content=itsgeorge&preview=713c72896c72957667ddc0e2959cbe03&workflow=preview

The website itself: https://itsgeorge.webflow.io/

Hi George! Please add a read-only link to your Webflow project so we can take a look. Instructions are here. Thanks!

1 Like

Yeah, thanks, I just did. Could you take a look, would really appreciate it?

Sure. Just took a peek. Essentially, using scale is what’s causing the difficulty here. Here’s what I would do.

  1. 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.
  2. 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!

1 Like

Oh, thanks a lot, I’ll try to do that, hope it’ll work

Yes, it did work great! Thans again. Didn’t expect that someone would help that fast)

1 Like

Awesome, glad to hear it!

1 Like

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.

1 Like

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:

image
image

1 Like

Oh, really? I’ve been watching some tutorials on youtube where they told to do what I did. Will be smarter next time, thank you so much!

1 Like