Merge pull request #2498 from framer/fix/sample-waapi-spring

Fixing virtualised WAAPI animations sampling
motiondivision · Jan 23, 2024 · 7cd9ade · 7cd9ade
2 parents 696b6b1 + 1f41303
commit 7cd9ade
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/dev/examples/Events-whileHover.tsx b/dev/examples/Events-whileHover.tsx
@@ -7,17 +7,17 @@ export function App() {
         <motion.div
             whileHover={{
                 opacity: 0.5,
-                transition: {
-                    type: "spring",
-                    mass: 0.5,
-                    damping: 10,
-                    stiffness: 20,
-                    restDelta: 0.00001,
-                    restSpeed: 0.00001,
-                },
             }}
             onClick={() => setScale(scale + 1)}
             style={{ width: 100, height: 100, background: "white" }}
+            transition={{
+                type: "spring",
+                mass: 1,
+                damping: 10,
+                stiffness: 60,
+                restDelta: 0.00001,
+                restSpeed: 0.00001,
+            }}
         />
     )
 }
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
@@ -227,6 +227,15 @@ export function createAcceleratedAnimation(
                     autoplay: false,
                 })
 
+                console.log(
+                    "setting with velocity",
+                    "currentTime",
+                    currentTime,
+                    "value",
+                    sampleAnimation.sample(currentTime - sampleDelta).value,
+                    options
+                )
+
                 value.setWithVelocity(
                     sampleAnimation.sample(currentTime - sampleDelta).value,
                     sampleAnimation.sample(currentTime).value,

diff --git a/packages/framer-motion/src/value/__tests__/index.test.ts b/packages/framer-motion/src/value/__tests__/index.test.ts
@@ -214,4 +214,11 @@ describe("MotionValue velocity calculations", () => {
 
         expect(Math.round(value.getVelocity())).toEqual(0)
     })
+
+    test("Velocity is correctly calculated after being set with setWithVelocity", async () => {
+        const value = motionValue(0)
+        value.set(100)
+        value.setWithVelocity(200, 100, 10)
+        expect(Math.round(value.getVelocity())).toBe(-10000)
+    })
 })
diff --git a/packages/framer-motion/src/value/index.ts b/packages/framer-motion/src/value/index.ts
@@ -278,7 +278,8 @@ export class MotionValue<V = any> {
 
     setWithVelocity(prev: V, current: V, delta: number) {
         this.set(current)
-        this.prev = prev
+        this.prev = undefined
+        this.prevFrameValue = prev
         this.prevUpdatedAt = this.updatedAt - delta
     }