Use of framer motion to move poker card into pile

[zhibin-wang09]

Hi!

I wanted to create a poker game using framer motion as well. I looked through your code but still confused on how you used framer motion to move the poker card from hand to pile. Can you provide any insight on how you approached that problem?

[aod]

Hi, appreciate your interest! It's been quite a while since I've last wrote code for this project. But I remember it being quite simple. I took a look at the Card component and think I found it:

zhithead/src/components/ui/Card.tsx

Line 36 in 7c78668

layoutId={props.card?.toString()}

The prop layoutId on a motion component enables this feature.
When you play a card it is removed from the Hand component, re-rendered without that card and rendered instead in the Pile component.
I don't know the technical details on how Framer Motion transitions the element. But I do know that using that prop animates out the old component and transitions it to the new component's place.

Let me know if that answers your question. Good luck on your poker game!

[zhibin-wang09]

WOW, it worked. I remember I was reading your code and was tinkering with the animate prop for the component because I thought I have to manipulate the x and y coordinates for the card. In hindsight I literally missed it by one line😭. Thank You!