From 5d74f69f00fbdc57f7aff0a211fa70ad7945feb5 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 11 Apr 2023 10:35:00 +0200
Subject: [PATCH] Converting time correctly

---
 dev/optimized-appear/interrupt-tween-transforms.html  |  9 +++++++++
 dev/optimized-appear/interrupt-tween-x.html           | 11 ++++++++++-
 .../src/animation/optimized-appear/handoff.ts         |  5 +++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/dev/optimized-appear/interrupt-tween-transforms.html b/dev/optimized-appear/interrupt-tween-transforms.html
index 181c9163cf..f595b23d4d 100644
--- a/dev/optimized-appear/interrupt-tween-transforms.html
+++ b/dev/optimized-appear/interrupt-tween-transforms.html
@@ -40,6 +40,7 @@
             const duration = 0.5
             const y = motionValue(0)
 
+            let isFirstFrame = true
             y.on("change", (latest) => {
                 if (latest < 50) {
                     showError(
@@ -47,6 +48,14 @@
                         `y transform should never be less than 50, but was ${latest}`
                     )
                 }
+
+                if (isFirstFrame && latest === 100) {
+                    showError(
+                        document.getElementById("box"),
+                        `y transform shouldn't be 100 on the first frame`
+                    )
+                }
+                isFirstFrame = false
             })
 
             // This is the tree to be rendered "server" and client-side.
diff --git a/dev/optimized-appear/interrupt-tween-x.html b/dev/optimized-appear/interrupt-tween-x.html
index 675f201088..c90ca48c8c 100644
--- a/dev/optimized-appear/interrupt-tween-x.html
+++ b/dev/optimized-appear/interrupt-tween-x.html
@@ -40,6 +40,7 @@
             const duration = 0.5
             const x = motionValue(0)
 
+            let isFirstFrame = true
             x.onChange((latest) => {
                 if (latest < 50) {
                     showError(
@@ -47,6 +48,14 @@
                         `x transform should never be less than 50`
                     )
                 }
+
+                if (latest === 100 && isFirstFrame) {
+                    showError(
+                        document.getElementById("box"),
+                        `x transform shouldn't be 100 on the first frame`
+                    )
+                }
+                isFirstFrame = false
             })
 
             // This is the tree to be rendered "server" and client-side.
@@ -76,7 +85,7 @@
             // Emulate server rendering of element
             root.innerHTML = ReactDOMServer.renderToString(Component)
 
-            // Start Motion One animation
+            // Start WAAPI animation
             const animation = startOptimizedAppearAnimation(
                 document.getElementById("box"),
                 "transform",
diff --git a/packages/framer-motion/src/animation/optimized-appear/handoff.ts b/packages/framer-motion/src/animation/optimized-appear/handoff.ts
index 5665f86cf1..f7dabfc229 100644
--- a/packages/framer-motion/src/animation/optimized-appear/handoff.ts
+++ b/packages/framer-motion/src/animation/optimized-appear/handoff.ts
@@ -56,8 +56,9 @@ export function handoffOptimizedAppearAnimation(
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.time =
-                    performance.now() - millisecondsToSeconds(sampledTime)
+                value.animation.time = millisecondsToSeconds(
+                    performance.now() - sampledTime
+                )
             }
         })