Merge pull request #2329 from framer/fix/handoff-waapi

Fixing handoff of WAAPI animations
framer · Sep 4, 2023 · da1cad3 · da1cad3
2 parents 1609dcb + c3f344d
commit da1cad3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/dev/optimized-appear/resync.html b/dev/optimized-appear/resync.html
@@ -33,6 +33,7 @@
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,
+                frame,
             } = window.Motion
             const { matchViewportBox } = window.Assert
             const root = document.getElementById("root")
@@ -66,12 +67,18 @@
                      * On animation start, check the values we expect to see here
                      */
                     onAnimationStart: () => {
-                        // matchViewportBox(document.getElementById("box"), {
-                        //     top: 100,
-                        //     right: 250,
-                        //     left: 150,
-                        //     bottom: 200,
-                        // })
+                        frame.postRender(() => {
+                            frame.postRender(() => {
+                                const box = document.getElementById("box")
+
+                                if (!box) return
+
+                                const { opacity } = window.getComputedStyle(box)
+                                if (parseFloat(opacity) < 0.65) {
+                                    showError(box, "Resync failed")
+                                }
+                            })
+                        })
                     },
                     [optimizedAppearDataAttribute]: "a",
                 })

diff --git a/packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts b/packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts
@@ -1,5 +1,5 @@
 import { EasingDefinition } from "../../../easing/types"
-import { frame, cancelFrame } from "../../../frameloop"
+import { frame, cancelFrame, frameData } from "../../../frameloop"
 import type { VisualElement } from "../../../render/VisualElement"
 import type { MotionValue } from "../../../value"
 import { AnimationPlaybackControls, ValueAnimationOptions } from "../../types"
@@ -136,6 +136,18 @@ export function createAcceleratedAnimation(
         }
     )
 
+    /**
+     * WAAPI animations don't resolve startTime synchronously. But a blocked
+     * thread could delay the startTime resolution by a noticeable amount.
+     * For synching handoff animations with the new Motion animation we want
+     * to ensure startTime is synchronously set.
+     */
+    if (options.syncStart) {
+        animation.startTime = frameData.isProcessing
+            ? frameData.timestamp
+            : performance.now()
+    }
+
     const cancelAnimation = () => animation.cancel()
 
     const safeCancel = () => {

diff --git a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts b/packages/framer-motion/src/animation/interfaces/visual-element-target.ts
@@ -8,7 +8,7 @@ import type { VisualElementAnimationOptions } from "./types"
 import { animateMotionValue } from "./motion-value"
 import { isWillChangeMotionValue } from "../../value/use-will-change/is"
 import { setTarget } from "../../render/utils/setters"
-import { AnimationPlaybackControls } from "../types"
+import { AnimationPlaybackControls, Transition } from "../types"
 
 /**
  * Decide whether we should block this animation. Previously, we achieved this
@@ -62,7 +62,11 @@ export function animateTarget(
             continue
         }
 
-        const valueTransition = { delay, elapsed: 0, ...transition }
+        const valueTransition = {
+            delay,
+            elapsed: 0,
+            ...transition,
+        }
 
         /**
          * If this is the first time a value is being animated, check
@@ -79,6 +83,7 @@ export function animateTarget(
                     value,
                     frame
                 )
+                ;(valueTransition as Transition).syncStart = true
             }
         }
 

diff --git a/packages/framer-motion/src/animation/types.ts b/packages/framer-motion/src/animation/types.ts
@@ -25,6 +25,7 @@ export interface Transition
     type?: "decay" | "spring" | "keyframes" | "tween" | "inertia"
     duration?: number
     autoplay?: boolean
+    syncStart?: boolean
 }
 
 export interface ValueAnimationTransition<V = any>