search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.14k stars 651 forks source link

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

Open dudo opened 4 years ago

dudo commented 4 years ago

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?

mpolichette commented 4 years ago

@dudo I'm not a maintainer, but I think this library's strong suit is DOM nodes entering/exiting the document. I think your animation needs are going to depend strongly on how you structure your DOM. There are a few libraries out there for you to try, here is an example article which surveys the field: https://blog.bitsrc.io/react-animation-libraries-for-2020-437a21c73fed