-
-
Notifications
You must be signed in to change notification settings - Fork 989
Open
Labels
bugSomething isn't workingSomething isn't working
Description
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
4. Steps to reproduce
- Install
motion
starting at version12.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
). - 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>
);
}
- Drag on one of the list items, and let it go. It will animate gracefully back to its position.
- Drag on the item again before it finishes animating, and then let go.
- 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 at12.7.5-alpha.0
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working