Skip to content

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

@jacobrobertsbaca

Description

@jacobrobertsbaca

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

React.App.Mozilla.Firefox.2025-07-17.00-21-33.mp4

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions