Manually set handoff animation startTime (#2756)

* Ensuring DOM keyframes are properly resolved even for externally-provided MotionValues * Updating gitignore * Latest: * Restoring tests * Cleaning branch * Removing unused import * adding startTime and test * Latest * Latest * Removing logs * Removing unused import * Manually setting startTime on handoff animations * Undo isHandoff change: * Replacing elasped and startTime with just startTime
motiondivision · Aug 15, 2024 · 7b377d6 · 7b377d6
1 parent 12a5189
commit 7b377d6
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 26 deletions.
diff --git a/packages/framer-motion/src/animation/interfaces/visual-element-target.ts b/packages/framer-motion/src/animation/interfaces/visual-element-target.ts
@@ -65,7 +65,6 @@ export function animateTarget(
 
         const valueTransition = {
             delay,
-            elapsed: 0,
             ...getValueTransition(transition || {}, key),
         }
 
@@ -78,14 +77,14 @@ export function animateTarget(
             const appearId = getOptimisedAppearId(visualElement)
 
             if (appearId) {
-                const elapsed = window.MotionHandoffAnimation(
+                const startTime = window.MotionHandoffAnimation(
                     appearId,
                     key,
                     frame
                 )
 
-                if (elapsed !== null) {
-                    valueTransition.elapsed = elapsed
+                if (startTime !== null) {
+                    valueTransition.startTime = startTime
                     isHandoff = true
                 }
             }

diff --git a/packages/framer-motion/src/animation/optimized-appear/handoff.ts b/packages/framer-motion/src/animation/optimized-appear/handoff.ts
@@ -2,9 +2,6 @@ import type { Batcher } from "../../frameloop/types"
 import { transformProps } from "../../render/html/utils/transform"
 import { appearAnimationStore } from "./store"
 import { appearStoreId } from "./store-id"
-import "./types"
-
-let handoffFrameTime: number
 
 export function handoffOptimizedAppearAnimation(
     elementId: string,
@@ -43,23 +40,6 @@ export function handoffOptimizedAppearAnimation(
 
         return null
     } else {
-        /**
-         * Otherwise we're starting a main thread animation.
-         *
-         * Record the time of the first handoff. We call performance.now() once
-         * here and once in startOptimisedAnimation to ensure we're getting
-         * close to a frame-locked time. This keeps all animations in sync.
-         */
-        if (handoffFrameTime === undefined) {
-            handoffFrameTime = performance.now()
-        }
-
-        /**
-         * We use main thread timings vs those returned by Animation.currentTime as it
-         * can be the case, particularly in Firefox, that currentTime doesn't return
-         * an updated value for several frames, even as the animation plays smoothly via
-         * the GPU.
-         */
-        return handoffFrameTime - startTime || 0
+        return startTime
     }
 }
diff --git a/packages/framer-motion/src/animation/optimized-appear/types.ts b/packages/framer-motion/src/animation/optimized-appear/types.ts
@@ -4,7 +4,7 @@ export type HandoffFunction = (
     storeId: string,
     valueName: string,
     frame: Batcher
-) => null | number
+) => number | null
 
 /**
  * The window global object acts as a bridge between our inline script