motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] Reorder.Item teleports back to its original position

Open jacobrobertsbaca opened this issue 6 months ago • 0 comments

[!NOTE] Motion for Vue issues: Please open in the Motion for Vue repo.

1. Read the FAQs 👇

2. Describe the bug

Dragging on a Reorder.Item in the middle of its animation back to its position and then letting go causes it to teleport back to its position rather than animate gracefully.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

CodeSandbox

4. Steps to reproduce

  1. Install motion starting at version 12.7.5-alpha.0. This is the earliest version the demonstrates this bug, going all the way up to the current version (12.23.6).
  2. Create a simple list demo (any demo will cause the error):
import React from "react";
import { Reorder } from "motion/react";

export default function App() {
  const [items, setItems] = React.useState([0, 1, 2, 3]);
  return (
    <Reorder.Group layoutScroll axis="y" values={items} onReorder={setItems}>
      {items.map((item) => (
        <Reorder.Item key={item} value={item}>
          {item}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}
  1. Drag on one of the list items, and let it go. It will animate gracefully back to its position.
  2. Drag on the item again before it finishes animating, and then let go.
  3. It snaps back suddenly without an animation.

5. Expected behavior

The item should animate back to its position gracefully, rather than "teleporting"

6. Video or screenshots

https://github.com/user-attachments/assets/53348027-f779-4884-923c-9c8c0f693b8a

7. Environment details

  • Windows 10
  • Tested Firefox 140.0.4 and Chrome 138.0.7204.101
  • Any motion version starting at 12.7.5-alpha.0

jacobrobertsbaca avatar Jul 17 '25 04:07 jacobrobertsbaca