[BUG] Reorder - Moving all the time / Doesn't consider scale and origin of parent

[FynniX]

1. Read the FAQs 👇

2. Describe the bug

The reorder items are moving around non stop, when you scale the parent and change the origin of the scale.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Reproduction

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to Reproduction
2. Wait until loading finishes
3. See error

5. Expected behavior

The reorder items shouldn't move around all the time. The animations should consider the scale and origin of the parent element.

6. Video or screenshots

Video

7. Environment details

OS: Windows 11
Browser: Chrome
Version: 127.0.6533.89

FAQs

"use client" error

We would accept a PR implementing "use client" (see previous discussion). In the meantime a workaround is:

// motion.js
"use client"
export * from "framer-motion"

// other.js
import { motion } from "./motion"

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

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>