[BUG] Motion elements does not follow parent component when dragged after react state update.

Describe the bug When dragging a motion.ul element i expect the children motion.li to also be dragged along. This works fine directly after mount, but as soon as we update the state of the component, the list elements becomes static.

I first suspected it was just something I’m missing in the new API, so I wrote a question on Stack Overflow. But after simplifying it further, and comparing with version 1.11.1, I now suspect this is a bug.

IMPORTANT: Provide a CodeSandbox reproduction of the bug https://codesandbox.io/s/framer-motion-reorder-animation-go6tb

Steps to reproduce

Steps to reproduce the behavior:

1. Drag the yellow background => Colored boxes follows the drag motion
2. Click on “Shuffle”
3. Drag the yellow background => Colored boxes do not move.

Expected behavior I expect the colored boxes to behave the same before and after the shuffle. This worked in version 1.11.1 (only code difference is using positionTransition instead of layout prop):

Video or screenshots

Environment details Windows 10 Chrome Version 83.0.4103.116

[mattgperry]

After a render layout projection has been enabled so elements are trying to project themselves to a specific place on the viewport.

At some point soonish I want to look into resolving these bounding boxes relatively to parents so I imagine this will fix that.

[rijk]

Temporarily overriding with transform: none !important worked as a workaround during animations, but I’m now running into the dragging issue as well.