motion
motion copied to clipboard
[BUG] Reorder.Item teleports back to its original position
[!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
motionstarting 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
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
motionversion starting at12.7.5-alpha.0