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

Removing animation of draggable "returning" #229

Closed
philest opened this issue Dec 15, 2017 · 2 comments
Closed

Removing animation of draggable "returning" #229

philest opened this issue Dec 15, 2017 · 2 comments

Comments

@philest
Copy link

philest commented Dec 15, 2017

Desired behavior: When a user drags an item from a list, that item disappears from the list.
Observed behavior: When a user drags an item from a list, that item animates and "returns" to the list.

I understand how to change the state to actually remove that element from the list. What I don't understand is how to remove that animated "return" of the item that appears regardless.

Thanks @alexreardon!

@jonvuri
Copy link

jonvuri commented Dec 17, 2017

Seconded. I have investigated several drag and drop libraries and the only thing blocking me from using this one is it forces a UX decision on me - the smooth animation of a dropped item returning to the list. Please accept that not everyone agrees with you that that is the optimal UX for drag and drop, and allow us to configure it. Some of us believe that a pretty but time-consuming animation following a user action is disconcerting for users and want a user experience that does not mentally interrupt the user's own flow. For our own application, this is backed up by actual user feedback. There are many alternatives, such as showing a colored or clone-and-expand "pulse" on top of the instantly-appearing dropped item, but that should be up to the consumer. We would like to get away from our rather buggy drag-and-drop implementation and this would be a great replacement, otherwise.

@alexreardon
Copy link
Collaborator

As mentioned in #216 skipping animations and cloning goes against the core principle of physicality that this library is going for. We are spending a lot of time ensuring that each interaction has some physical metaphor. We are very upfront that this library is not for everyone and has some strong UX opinions in order to achieve a more physical drag and drop. A big part of this is no instant movement

It is a fairly standard drag and drop pattern for things to disappear and reappear in response to the users drag. For a more natural drag we animate the movement of items as they need to move out of the way while dragging to more clearly show a drags effect. We also animate the drop of an item so that it animates into its new home position. At no point is an item instantly moved anywhere — regardless of whether it is dragging or not.

Regarding input blocking the user, please refer to this section of the docs

react-beautiful-dnd works really hard to avoid as many periods of non-interactivity as possible. The user should feel like they are in control of the interface and not waiting for an animation to finish before they can continue to interact with the interface. However, there is a balance that needs to be made between correctness and power in order to make everybody's lives more sane.

There are a few minor exceptions to that which you can read at that link.

We are extremely upfront about the philosophy of physicality. If this does not line up with your specific needs then you are welcome to use a more generic drag and drop library such as react-dnd

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

3 participants