Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Functionality check (I'd just like some clarification) #595

Open
dudo opened this issue Jul 22, 2020 · 1 comment
Open

Functionality check (I'd just like some clarification) #595

dudo opened this issue Jul 22, 2020 · 1 comment

Comments

@dudo
Copy link

dudo commented Jul 22, 2020

I'm working on a websocket drag & drop application. l'm currently using gsap, and manipulating the dom, and it doesn't feel very "react-y". I've decided to implement a lower level solution using react-dnd. Their example of playing chess is a great example of something I'm trying to do. A component is changing parents when the knight (in this case) is dropped into a square.

I'd like to animate that drop... from the original position, to the dropped position. I was hoping it would be as easy as setting transition: "all 2s ease-in-out" and it would "just work", but I couldn't be so lucky. I'm wondering if your tool provides that type of functionality, and if not, if you knew of a library that might help?

@serprex
Copy link

serprex commented Oct 14, 2020

Yes, here's an example where I'm managing game pieces with TransitionMotion:

https://github.com/serprex/openEtG/blob/130c248592ed0ae5f9cd9a6672eb26d9563728cd/src/views/Match.js#L1708

Give each piece an id, spring motion it to where it's supposed to go, done

Alternatively you can just use an array of Motion instances which have key={id}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants