Hover Interaction Nightmare

Design help Animations & Interactions
1

Hi All,

I’m relatively new to Webflow and am working on an interaction for our homepage. I’m having major issues with the mouse hover (in and out) animations. I’m trying to have a background animate in and text appear when the user rolls over the rotating asterisk. It works fine on hover in, but both of my attempts at the hover out state are awful and produce a hover in animation that flickers, or on the other hover out try, shows the hovered state on page load. I don’t currently have a hover out state chosen, and the hover in works as desired. But when either hover out states are applied, you can see the issues. I appreciate any help you can provide!

Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: http:// Webflow - 2023 Mindspace Website_NEW
[2]: Share a read-only link | Webflow University

2

I’m also having issues with the services horizontal scroll and I’m not sure what I’m doing wrong. Currently, there’s a lot of empty space at the end of the horizontal scroll (depending on your screen viewport width / height. I’m sure both of these are simple fixes, but I’m completely stumped. TIA!