[BUG] Reorder does not work as expected in a scrollable page #3469
Description
Note
Motion for Vue issues: Please open in the Motion for Vue repo.
1. Read the FAQs 👇
2. Describe the bug
Give a clear and concise description of what the bug is.
I was looking forward to using the Reorder feature with Auto-scroll lists, however, upon using a slightly different version than the contrived example it doesn't work.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
I believe this example from Motion.dev docs should be sufficient.
4. Steps to reproduce
Steps to reproduce the behavior:
- Go to Reorder's To-do List example
- Attempt to reorder items within scroll boundaries (Succeed)
- Open
Dev Tools - Select
<body>element - Set
heightvalue to200vh - Once again, attempt to reorder items within scroll boundaries (Failure)
5. Expected behavior
I'd expect the reorder feature to work within a scrollable page.
6. Video or screenshots
Note: had to reduce file size by compressing the video, sorry if it looks awful
Screen.Recording.2026-01-12.at.11.21.44.720p.mov
7. Environment details
If applicable, let us know which OS, browser, browser version etc you're using.
Browser: Brave 1.85.118 (Official Build) (arm64) — Chromium: 143.0.7499.169
OS: macOS Sonoma 14.5
FAQs
React Server Components "use client" error
If you're importing motion or m into a React Server Component environment, ensure you're importing from motion/react-client instead of motion/react.
import * as motion from "motion/react-client"
import * as m from "framer-motion/react-m"Motion for React won't install
Different versions of Motion for React are compatible with different versions of React.
React 19: framer-motion@12.0.0-alpha.0 or higher
React 18: framer-motion@7.0.0 to framer-motion@11.x, or motion
React 17: framer-motion@6.x or lower
height: "auto" is jumping
Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.
The recommended solution is to move padding to a child element. See this issue for the full discussion.
Preact isn't working
Motion for React isn't compatible with Preact.
AnimatePresence isn't working
Have all of its immediate children got a unique key prop that remains the same for that component every render?
// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
{items.map((item, index) => (
<Component key={index} />
))}
</AnimatePresence>// Good: The item ID is unique to each component
<AnimatePresence>
{items.map((item, index) => (
<Component key={item.id} />
))}
</AnimatePresence>Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!
// Bad: AnimatePresence is unmounted - exit animations won't run
{
isVisible && (
<AnimatePresence>
<Component />
</AnimatePresence>
)
}// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>{isVisible && <Component />}</AnimatePresence>