Streaming live at 10am (PST)

Issue with animation on Hover Out

Hello Dear Webflow Community,

I am experiencing a problem with animations in one of our projects. I am doing a hover animation on two elements. The idea is that once one element is hovered, it changes the width to 60%, changes the background color, as well as the text color. The other element in the row shrinks to 40%. The problem begins with 2 aspects:

  1. For some odd reason when animating the left side the element expands to 60% with no problem. However, doing exactly the same animation on the right element doesn’t affect the width at all. Therefore, instead of doing IX animation, I had to resort to a simple hover width change.

  2. The second problem is where the issue that I can’t solve lives. On the left element when I hover out of the element to the bottom the hover out animation works nicely. However, if I hover to the top it gets stuck in the middle.

I am not sure what to do here and will be happy to receive any help!

Thank you

Here is the link to the page where it happens:

Here is my public share link: