Fixing sampling waapi

motiondivision · Jan 23, 2024 · 418fdab · 418fdab
1 parent 696b6b1
commit 418fdab
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 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)
+    })
 })