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

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
  }
  }

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
  }
 }

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