Issue with animation on Hover Out

Design help Animations & Interactions
1

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: https://fabrice-grinda.webflow.io/article/avoid-death-in-the-desert-75-packing-list-essentials-for-burning-man

Here is my public share link: https://preview.webflow.com/preview/fabrice-grinda?utm_medium=preview_link&utm_source=dashboard&utm_content=fabrice-grinda&preview=e127f1eaf71dcdee0fd73074c493e2b0&mode=preview