Skip to main content

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?


Screenshot 2022-11-16 172531

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


Figma – 16 Nov 22

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.

Reply


Terms & ConditionsCookie settings