How to properly use scale with layoutId ?

[GFoniX]

Hi everyone,

I’m working on a "Hero-style" animation and could use some advice. I have a card inside a modal, and I’d like to move the card and scale it up at the same time when I click on it.

The issue I’m facing is that the animation looks strange and seems "buggy" — there’s a noticeable cut or jump during the transition, which ruins the smoothness I’m aiming for.

I’d like to know if anyone has an alternative approach to achieve this kind of animation. To clarify, I’d prefer to make the scale animation happen while the card is moving, rather than having the scaling occur afterward.

Any help or tips would be greatly appreciated!

Thanks in advance!

Here is the code I currently have

https://codesandbox.io/p/sandbox/xncztn