[BUG] `Reorder` breaks when wrapped by `motion.div` with a scale transform

[ed0wolf]

1. Read the FAQs 👇

2. Describe the bug

When using Reorder is used inside a motion.div with a scale animation it becomes very jumpy and unusable.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-5-drag-to-reorder-lists-forked-75ms3t

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the example sandbox
2. Try to drag-n-drop one of the items to re-order

5. Expected behavior

It re-order items smoothly

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

Chrome & Firefox

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 framer-motion/client instead of framer-motion.

import * as motion from "framer-motion/client"
import * as m from "framer-motion/m"

Framer Motion won't install

Different versions of Framer Motion are compatible with different versions of React.

React 19: 12.0.0-alpha.0 or higher
React 18: 7.0.0 to 11.x
React 17: 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

Framer Motion 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>