Converting time correctly

framer · Apr 11, 2023 · 5d74f69 · 5d74f69
1 parent c7c91b8
commit 5d74f69
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/dev/optimized-appear/interrupt-tween-transforms.html b/dev/optimized-appear/interrupt-tween-transforms.html
@@ -40,13 +40,22 @@
             const duration = 0.5
             const y = motionValue(0)
 
+            let isFirstFrame = true
             y.on("change", (latest) => {
                 if (latest < 50) {
                     showError(
                         document.getElementById("box"),
                         `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
@@ -40,13 +40,22 @@
             const duration = 0.5
             const x = motionValue(0)
 
+            let isFirstFrame = true
             x.onChange((latest) => {
                 if (latest < 50) {
                     showError(
                         document.getElementById("box"),
                         `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
@@ -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
+                )
             }
         })