Fixing AnimatePresence with layout children (#3076)

* Fixing AnimatePresence * Updating changelog
motiondivision · Feb 20, 2025 · 46390cf · 46390cf
1 parent d889c86
commit 46390cf
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/Makefile b/Makefile
@@ -95,7 +95,7 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/drag.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/animate-presence-layout.ts"
 
 
 lint: bootstrap

diff --git a/dev/react/src/tests/animate-presence-layout.tsx b/dev/react/src/tests/animate-presence-layout.tsx
@@ -1,44 +1,35 @@
 import { AnimatePresence, motion } from "framer-motion"
-import { useEffect, useState } from "react"
+import { 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)
+function Component() {
+    const [showChild, setShowChild] = useState(true)
 
-            setTimeout(() => {
-                setWidth(200)
-            }, 1000)
-        }, 1000)
-
-        return () => clearTimeout(timeout)
-    }, [width])
+    return (
+        <motion.div>
+            <button id="inner" onClick={() => setShowChild(!showChild)}>
+                Toggle
+            </button>
+            {showChild && <motion.div layout>Hello</motion.div>}
+        </motion.div>
+    )
+}
 
-    useEffect(() => {
-        setTimeout(() => {
-            setPresenceState(false)
-        }, 2100)
-    }, [presenceState])
+export const App = () => {
+    const [showChild, setShowChild] = useState(true)
 
     return (
         <>
+            <button id="outer" onClick={() => setShowChild(!showChild)}>
+                Toggle outer child
+            </button>
             <AnimatePresence initial={false}>
-                {presenceState && (
-                    <motion.div exit={{ opacity: 0 }}>
-                        <motion.div
-                            layout
-                            style={{
-                                width,
-                                height: 100,
-                                background: "red",
-                            }}
-                        >
-                            Presence
-                        </motion.div>
+                {showChild && (
+                    <motion.div
+                        id="box"
+                        exit={{ opacity: 0 }}
+                        style={{ width: 200, height: 200, background: "red" }}
+                    >
+                        <Component />
                     </motion.div>
                 )}
             </AnimatePresence>

diff --git a/packages/framer-motion/cypress/integration/animate-presence-layout.ts b/packages/framer-motion/cypress/integration/animate-presence-layout.ts
@@ -0,0 +1,14 @@
+describe("AnimatePresence", () => {
+    it("Ensures all elements are removed", () => {
+        cy.visit("?test=animate-presence-layout")
+            .wait(50)
+            .get("#inner")
+            .trigger("click", 1, 1, { force: true })
+            .wait(100)
+            .get("#outer")
+            .trigger("click", 1, 1, { force: true })
+            .wait(700)
+            .get("#box")
+            .should("not.exist")
+    })
+})
diff --git a/packages/framer-motion/src/components/AnimatePresence/use-presence.ts b/packages/framer-motion/src/components/AnimatePresence/use-presence.ts
@@ -49,7 +49,9 @@ export function usePresence(
 
     const id = useId()
     useEffect(() => {
-        if (subscribe) register(id)
+        if (subscribe) {
+            return register(id)
+        }
     }, [subscribe])
 
     const safeToRemove = useCallback(