React-beautiful-dnd: Incorrect drop animation on empty list

[nicubarbaros]

I could not find anything in the doc how to disable the end animation.

I dug in the code and found that the draggable component receives 2 props isDropAnimating, canAnimate. I am not sure if these 2 are for disabling the end animation but I tried this but there is still that annoying delay end animation
<Draggable draggableId={postId} isDropAnimating={false} canAnimate={false}>
Any ideas?

[alexreardon]

Hi @nicubarbaros. Those props are controlled by the smart component and are not public api. Setting them will have no impact. They are used internally. Please ignore them. There is no way to disable the end animation. Doing so would go against our core design principle

[nicubarbaros]

http://recordit.co/G7iH14ihP8 here is a gif

When I release it's kind of goes up a bit then goes down.

[lukebatchelor]

This issue might be useful to look at

https://github.com/atlassian/react-beautiful-dnd/issues/126

It was suggested to set a min height on the empty stoppable container. That might help?

[lukebatchelor]

Droppable*

[bradleyayers]

I haven't come up with a better proposed solution than in https://github.com/atlassian/react-beautiful-dnd/issues/126#issuecomment-341814761. Animating to the position of the _placeholder_ in an empty list (rather than the top of the list) makes a lot of sense to me.

[alexreardon]

Thanks for the gif @nicubarbaros. Can you please create a reproducible example on webpack bin?

Here is a boilerplate to get started from: https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

I suspect there may be a combination of things going on. #158 comes to mind. Now that I can see why you wanted to disable the animation your issue makes more sense to me. The goal is for the drop animation to work. It looks like it is not. I consider that a bug that we should fix - or at the least provide a work around.

[nicubarbaros]

@lukebatchelor, @bradleyayers I am gonna look into those solutions.

[alexreardon]

Also, keep in mind that the stories work correctly with an empty list. Right now the Droppable defines the droppable area. In your example it looks like there is content within the droppable which is what is causing your issue

[nicubarbaros]

Yes I do have that small header.

[nicubarbaros]

Sometimes I am getting this weird behavior as well. It goes Up like crazy :D. It happens even if I have more Draggable in a Droppable

http://recordit.co/jWy8ZrJM5U

PS: this evening I am going to put an example together so I can share with you.

[alexreardon]

Due to inactivity this is being closed. Things that might be relevant:

1. https://github.com/atlassian/react-beautiful-dnd#warning-position-fixed
2. droppables must not contain elements that take up space and are not draggables

Feel free to reply if more information comes to light