[BUG] AnimatePresence + layout bugs

[zinchenkoivan]

1. Read the FAQs 👇

2. Describe the bug

After updating the library from version "framer-motion": "^10.16.16" to version "motion": "^11.18.0", a strange issue appeared. The toggle that contains layout (below on line 41) prevents the dialog window from being removed from the DOM. Maybe this issue is related to this one.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

URL

4. Steps to reproduce

1. Click Open
2. Click Next
3. Click Previous
4. Click Сlose
5. Observe that element with class "rdk-portal" is still present in DOM elements (with red background)

5. Expected behavior

The element should be removed from the DOM when closed.

6. Video or screenshots

Screen_Recording_2025-02-11_at_09.52.48.mp4

7. Environment details
mac OS 15.3, Google chrome latest.

[siddarth]

Just chiming in to say that we're observing the same bug: thanks for the great report and repro case.

[ImExoOdeex]

I've had same issue on my website, wrap your layout components with <AnimatePresence>, that worked for me 👍

[ValentinH]

I faced the exact same issue (using layoutId instead of layout though) and I found this issue thanks to the previous comment that made if go to the top of the issues list 🎉

In my case, I'm using a motion.div with a layoutId that is a child of a modal using AnimatePresence higher in the tree.

I could bisect the exact change that introduced the issue: #2992 and first appeared in v11.17.0.

This issue is the same as #1619

[pchurro]

Chiming in to say I think this is also happening to me.

I have a component with a custom cursor that whenever the mouse is not on top of the component, the cursors lock in at the center of the component (using two different divs and layoutId):

{hoveringFilm && <motion.div
                layoutId="cursor"
                layout="position"
                className={"${styles.cursor} ${styles.cursorFollowing}"}
                transition={spring}
                key={"cursor"}
                initial={{ x: mouse.x - 50, y: mouse.y - 50 }}
                animate={{ x: mouse.x - 50, y: mouse.y - 50 }}
            >
                <motion.div key={"cursorTextWrapper"} className={styles.cursorTextWrapper} style={{ overflow: "hidden" }}> 
                         <motion.div className={styles.cursorText}>Play video</motion.div>
                 </motion.div>
              </motion.div>}

{!hoveringFilm && <motion.div
                layoutId="cursor"
                className={"${styles.cursor} ${styles.cursorFixed}"}
                key={"cursorFixed"}
                transition={spring}
               >
                <motion.div key={"cursorTextWrapper"} className={styles.cursorTextWrapper} style={{ overflow: "hidden" }}> 
                        <motion.div className={styles.cursorText}>Play video</motion.div>
                 </motion.div>
            </motion.div>}

I noticed that, whenever I hovered the component, afterwards I couldn't change route. The page transition would start but it would get stuck halfway. I tried removing the layout animation (removed the layout props) and this did stop happening.
Following @ImExoOdeex 's suggestion I wrapped the divs in an <AnimatePresence> and it fixed it for me.

[mattgperry]

A quick attempt at a reproduction hasn't worked so I'll take a look on Monday. In the meantime a really simple example I could throw in a test would be appreciated.

Something like this (though this didn't reproduce the bug yet)

import { AnimatePresence, motion } from "framer-motion"
import { useEffect, useState } from "react"

export const App = () => {
    const [width, setWidth] = useState(100)
    const [presenceState, setPresenceState] = useState(true)

    useEffect(() => {
        if (width === 200) return
        const timeout = setTimeout(() => {
            setWidth(50)

            setTimeout(() => {
                setWidth(200)
            }, 1000)
        }, 1000)

        return () => clearTimeout(timeout)
    }, [width])

    useEffect(() => {
        setTimeout(() => {
            setPresenceState(false)
        }, 2100)
    }, [presenceState])

    return (
        <>
            <AnimatePresence initial={false}>
                {presenceState && (
                    <motion.div exit={{ opacity: 0 }}>
                        <motion.div
                            layout
                            style={{
                                width,
                                height: 100,
                                background: "red",
                            }}
                        >
                            Presence
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    )
}

[ValentinH]

Why was this closed though?

[mattgperry]

Friday evening 😅

[kelseyyoung]

We're having a bug that sounds similar after upgrading to 11.18.2 - layout animations are "cancelled"/immediately snapping when an item is added in AnimatePresence. This seems to be fixed though in v12.0.1, and the changelog description for that sounds relevant. I wasn't however able to repro in an isolated sandbox

Just adding this anecdote in case it's helpful. Again not sure if it's exactly the same bug but seemed vaguely similar