Components animation

[Hussam_Abu_Khorj]

Hello All,

I am trying to do a simple animation for a photos stack, I created a component set with 2 components; one with the default state (left) and the other one with the photos moved and I set the animation to be while hovering and made it smart animate.

The problem is I want the photo in the front to stay in place and the other 2 to move, but this is not the case, the animation (if I can explain this correctly) seems to move from the top left corner and all photos are moved, how do I make it such that the photo in front stays in place and the other 2 only move?

[Hussam_Abu_Khorj]

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

Figma

[Joshua_Kales]

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

[Joshua_Kales]

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.

[Hussam_Abu_Khorj]

Hello Joshua,

Thank you for your reply,

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

[Gleb]

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.

[Hussam_Abu_Khorj]

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!

[Gleb]

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.