Fixing handoff

framer · Dec 1, 2023 · 2a7784f · 2a7784f
1 parent 56cc201
commit 2a7784f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/packages/framer-motion-3d/package.json b/packages/framer-motion-3d/package.json
@@ -60,5 +60,5 @@
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1"
     },
-    "gitHead": "df6baca3783829a3b83db1158258ca56f5b9824e"
+    "gitHead": "56cc2017844cc9d02d92d9576bbb58c536307f54"
 }
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -116,5 +116,5 @@
             "maxSize": "31.8 kB"
         }
     ],
-    "gitHead": "df6baca3783829a3b83db1158258ca56f5b9824e"
+    "gitHead": "56cc2017844cc9d02d92d9576bbb58c536307f54"
 }
diff --git a/packages/framer-motion/src/animation/optimized-appear/handoff.ts b/packages/framer-motion/src/animation/optimized-appear/handoff.ts
@@ -33,11 +33,6 @@ export function handoffOptimizedAppearAnimation(
     const { animation, startTime } = appearAnimation
 
     const cancelOptimisedAnimation = () => {
-        /**
-         * Once we've handed animations off, we can delete the global reference.
-         */
-        window.HandoffAppearAnimations = false
-
         appearAnimationStore.delete(storeId)
 
         /**

diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts
@@ -9,6 +9,7 @@ import { VisualState } from "./use-visual-state"
 import { LazyContext } from "../../context/LazyContext"
 import { MotionConfigContext } from "../../context/MotionConfigContext"
 import type { VisualElement } from "../../render/VisualElement"
+import { optimizedAppearDataAttribute } from "../../animation/optimized-appear/data-id"
 
 export function useVisualElement<Instance, RenderState>(
     Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
@@ -51,7 +52,7 @@ export function useVisualElement<Instance, RenderState>(
      * Cache this value as we want to know whether HandoffAppearAnimations
      * was present on initial render - it will be deleted after this.
      */
-    const canHandoff = useRef(Boolean(window.HandoffAppearAnimations))
+    const wantsHandoff = useRef(Boolean(props[optimizedAppearDataAttribute]))
 
     useIsomorphicLayoutEffect(() => {
         if (!visualElement) return
@@ -68,7 +69,7 @@ export function useVisualElement<Instance, RenderState>(
          * So if we detect a situtation where optimised appear animations
          * are running, we use useLayoutEffect to trigger animations.
          */
-        if (canHandoff.current && visualElement.animationState) {
+        if (wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges()
         }
     })
@@ -78,11 +79,17 @@ export function useVisualElement<Instance, RenderState>(
 
         visualElement.updateFeatures()
 
-        if (!canHandoff.current && visualElement.animationState) {
+        if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges()
         }
 
-        canHandoff.current = false
+        /**
+         * Once we've handed animations off, we can delete the global reference.
+         */
+        if (wantsHandoff.current) {
+            window.HandoffAppearAnimations = false
+            wantsHandoff.current = false
+        }
     })
 
     return visualElement