[BUG] layout prop breaks MotionValue

If an element has a layout prop, MotionValue is not updated while dragging that element, so dependent elements don’t animate.

CodeSandbox with reproduction – based on the official Motion Value Example Sandbox

Steps to reproduce

1. Use official Motion Value Example Sandbox withlayout prop added to the box element (link above)
2. Drag element left and right
3. Notice that the background doesn’t animate, nor does the icon inside the box.

Expected behavior

Adding layout prop doesn’t break MotionValue behavior.

[bakoushin]

Another issue with detached MotionValue.

Can we stop layout animation at any given point of time like we could with MotionValue.stop()?

For example: I want to achieve a “swipe-to-remove” animation in a list of items.

In this CodeSanbox example (based on official Notifications Demo) each notification could be removed from the stack by dragging to the left.

Notice, that before starting an exit animation, a box first bounces back near to its initial position. Is there a way to stop it from bouncing back and just start exit animation from where the drag gesture ended?

Metaphorically speaking, how can we cut the invisible spring holding it? It is achievable using MotionValue.stop(), but since layout detaches MotionValue from the element, it’s no longer an option.

Maybe there are other ways to achieve this?

[mattgperry]

This has been solved in the meantime