Components animation

Here is a link for the prototype to see how the animation is working now

Have you tried making the object in front an overlay? Then inside the overlay have a component that will switch variants based on actions?

I should have looked at your animation before I responded! Your animation looks great as you have it!

But an overlay should work as above to just stay in place or animate.
I use a trick for doing something similar where I will use an overlay changing after a delay but set the delay value so fast its not perceptible. So you could use different animations with components being composited.

Hello Joshua,

Thank you for your reply,

I can not understand exactly what you mean by making the front object an overlay?

The answer is much simpler: you just need to make sure both components have the exact same size and the middle card is at the same coordinate in both of them.

Hello Gleb,

Thank you so much I tried this and it actually worked, the only thing is I feel the hover area is now bigger but no worries.

Thank you again!

You can make both components smaller. Use whatever size you need the hover area to be. And if this solved your question, feel free to mark my answer as a solution.