Flush drop animation if there is a scroll event

[Nathan-Fenner]

Bug or feature request?

Bug

Expected behavior

Dropped items animate to their final resting place, regardless of scroll.

Actual behavior

Dropped items animate to fixed point on screen, then jump to final resting place.

This is noticeable when scrolling right after / during the drop.

Steps to reproduce

Example Storybook

• start dragging an item
• drop the item and immediately scroll downward quickly

The item will noticeably stick to its place in the screen. Then it will disappear when the animation completes.

I would expect the item to be animating with position: relative towards an offset of 0, 0, so that it naturally settles where it's going to end up. Instead, it animates to where it would end up on screen if the viewport doesn't scroll. That means if you do scroll, it animates towards the wrong place.

When the animation ends, it jumps to the right location, so this is only an issue during the animation.

(it makes sense that it would be fixed while actually being dragged, but as soon as the user releases the item it should be drawn with position: relative instead, in my mind).

What version of React are you using?

16.8.0, but doesn't seem to matter.

What browser are you using?

Chrome (71.0.3578.98)

[alexreardon]

Unfortunately I don't think we will be able to use position:relative here for layering and other issues.

We could improve the experience by flushing the drop animation if we detect a scroll. That way if there is a scroll during a drop animation the drop animation will fast forward to the end immediately. I think this is an okay compromise

Thoughts @Nathan-Fenner ?

[Nathan-Fenner]

It would be nice if the animation still worked, but snapping to destination would probably be fine too.

Would it be possible to instead update the animation position on scroll?

Really, the problem is that the animation's start & end become "stale" on scrolling, since the place that they're moving from/to are no longer the same.

Could these parameters be recomputed on scroll instead, and the item's location updated? Would that be too expensive?

[alexreardon]

Anything is possible, but i am not sure the complexity is worth it. Also, if a scroll is occurring then we might need to worry about animation interuption and completion which could look janky given we are using css animations and not a js animation library for the drop animation

[alexreardon]

I think the fast forwarding of the drop animation is the best course

[alexreardon]

This is available in 12.0.0-alpha.7