Motion: [BUG] v2.5.1 Odd Behavior with Drag & onViewportBoxUpdates

[stolinski]

2. Describe the bug

After upgrading to 2.5.1 drag reorder list code no longer works. After drag, items snap into odd locations, and onViewportBoxUpdate fires repeatedly

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

@InventingWithMonster 's Drag and Drop Sandbox forked and upgraded: https://codesandbox.io/s/framer-motion-2-drag-to-reorder-forked-251-yfywb

A drag handle example - https://codesandbox.io/s/framer-motion-2-drag-to-reorder-251-614er?file=/src/App.js

Both of these work in older versions of Framer Motion 2.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to either repo and attempt to drag items. They will start to no relocate correctly.

[stolinski]

I made a gif to show what's happening.

[souporserious]

Just ran into this as well. It looks like any state updates that occur at the end of drag when the layout prop is used causes it to get stuck. I made a small repro here.

[mattgperry]

Thanks for the report guys - this is fixed in 2.5.2.

I've also realised these lines are a remnant from development:

        // Animate the component back to 0 when dragging ends
        dragConstraints={{ top: 0, bottom: 0 }}
        // But allow full movement outside those constraints
        dragElastic={1}

As it's a layout animation-enabled layer it will animate back to its new layout naturally.

[mattgperry]

Update the original sandbox to reflect the above

[tmikeschu]

Thanks @mattgperry ! For others, I found this link on twitter of a working example with v2

https://codesandbox.io/s/framer-motion-2-drag-to-reorder-fc4rt

[souporserious]

This might already be known, but looks like something from 2.7.9rc to 2.8.0rc is breaking that demo:

[mattgperry]

@souporserious Thanks very much for the heads up!