Fix laggy spring animations at 240hz refresh rates

packages/framer-motion/src/animation/sequence/__tests__/index.test.ts

@@ -587,7 +587,7 @@ describe("createAnimationsFromSequence", () => {
         expect(animations.get(a)!.keyframes.x).toEqual([0, 100])
         const { duration, ease } = animations.get(a)!.transition.x
 
-        expect(duration).toEqual(1.1)
+        expect(duration).toEqual(1.05)
         expect(typeof (ease as Easing[])[0]).toEqual("function")
     })
 

packages/framer-motion/src/motion/__tests__/waapi.test.tsx

@@ -126,8 +126,8 @@ describe("WAAPI animations", () => {
             },
             {
                 delay: -0,
-                duration: 1100,
-                easing: "linear(0, 0.0049, 0.019, 0.0412, 0.0706, 0.1061, 0.1469, 0.1921, 0.2407, 0.292, 0.3452, 0.3997, 0.4547, 0.5097, 0.5642, 0.6177, 0.6698, 0.72, 0.7681, 0.8139, 0.8571, 0.8975, 0.935, 0.9696, 1.0011, 1.0296, 1.055, 1.0775, 1.0971, 1.1139, 1.1279, 1.1394, 1.1484, 1.1551, 1.1597, 1.1623, 1.163, 1.1621, 1.1598, 1.1561, 1.1512, 1.1454, 1.1387, 1.1313, 1.1234, 1.115, 1.1063, 1.0974, 1.0884, 1.0794, 1.0706, 1.0619, 1.0534, 1.0452, 1.0374, 1.03, 1.0229, 1.0164, 1.0103, 1.0047, 0.9996, 0.9949, 0.9908, 0.9872, 0.984, 0.9813, 0.979, 0.9772, 0.9757, 0.9747, 0.9739, 0.9735, 0.9734, 0.9736, 0.974, 0.9746, 0.9754, 0.9764, 0.9774, 0.9787, 0.98, 0.9813, 0.9827, 0.9842, 0.9857, 0.9871, 0.9886, 0.99, 0.9914, 0.9927, 0.994, 0.9952, 0.9963, 0.9974, 0.9984, 0.9993, 1.0001, 1.0009, 1.0015, 1.0021, 1.0026, 1.0031, 1.0034, 1.0037, 1.004, 1, 1, 1, 1, 1)",
+                duration: 1050,
+                easing: "linear(0, 0.0049, 0.019, 0.0413, 0.0707, 0.1062, 0.147, 0.1922, 0.2408, 0.2922, 0.3454, 0.3999, 0.455, 0.51, 0.5646, 0.6181, 0.6701, 0.7204, 0.7685, 0.8143, 0.8574, 0.8978, 0.9353, 0.9699, 1.0014, 1.0299, 1.0553, 1.0778, 1.0973, 1.1141, 1.1281, 1.1395, 1.1485, 1.1552, 1.1597, 1.1623, 1.163, 1.1621, 1.1597, 1.156, 1.1511, 1.1453, 1.1386, 1.1312, 1.1232, 1.1148, 1.1061, 1.0972, 1.0882, 1.0793, 1.0704, 1.0617, 1.0532, 1.045, 1.0372, 1.0298, 1.0228, 1.0162, 1.0101, 1.0045, 0.9994, 0.9948, 0.9907, 0.9871, 0.9839, 0.9812, 0.979, 0.9771, 0.9757, 0.9746, 0.9739, 0.9735, 0.9734, 0.9736, 0.974, 0.9746, 0.9754, 0.9764, 0.9775, 0.9787, 0.98, 0.9814, 0.9828, 0.9843, 0.9857, 0.9872, 0.9886, 0.99, 0.9914, 0.9927, 0.994, 0.9952, 0.9964, 0.9974, 0.9984, 0.9993, 1.0001, 1.0009, 1.0016, 1.0021, 1.0027, 1.0031, 1.0035, 1.0037, 1)",
                 iterations: 1,
                 direction: "normal",
                 fill: "both",

packages/motion-dom/src/animation/JSAnimation.ts

@@ -14,6 +14,7 @@ import { DriverControls } from "./drivers/types"
 import { inertia } from "./generators/inertia"
 import { keyframes as keyframesGenerator } from "./generators/keyframes"
 import { calcGeneratorDuration } from "./generators/utils/calc-duration"
+import { getGeneratorVelocity } from "./generators/utils/velocity"
 import { getFinalKeyframe } from "./keyframes/get-final"
 import {
     AnimationPlaybackControlsWithThen,
@@ -384,6 +385,28 @@ export class JSAnimation<T extends number | string>
         }
     }
 
+    /**
+     * Returns the generator's velocity at the current time in units/second.
+     * Uses the analytical derivative when available (springs), avoiding
+     * the MotionValue's frame-dependent velocity estimation.
+     */
+    getGeneratorVelocity(): number {
+        const t = this.currentTime
+        if (t <= 0) return this.options.velocity || 0
+
+        if (this.generator.velocity) {
+            return this.generator.velocity(t)
+        }
+
+        // Fallback: finite difference
+        const current = this.generator.next(t).value as number
+        return getGeneratorVelocity(
+            (s) => this.generator.next(s).value as number,
+            t,
+            current
+        )
+    }
+
     get speed() {
         return this.playbackSpeed
     }

packages/motion-dom/src/animation/generators/__tests__/inertia.test.ts

@@ -97,7 +97,7 @@ describe("inertia", () => {
             min: 0,
         })
         const { keyframes, duration } = pregenerateKeyframes(generator)
-        expect(duration).toEqual(1.42)
+        expect(duration).toEqual(1.85)
         expect(keyframes).toEqual(expectedAnimationKeyframesWithMin)
     })
 
@@ -125,7 +125,7 @@ describe("inertia", () => {
             max: 200,
         })
         const { keyframes, duration } = pregenerateKeyframes(generator)
-        expect(duration).toEqual(1.42)
+        expect(duration).toEqual(1.85)
         expect(keyframes).toEqual(expectedAnimationKeyframesWithMax)
     })
 
@@ -395,7 +395,21 @@ const expectedAnimationKeyframesWithMin = [
     -0.06449211350032416, -0.05128936389831648, -0.03691275765931889,
     -0.0221552144769921, -0.007752247846719602, 0.005647423141537939,
     0.017504352738798582, 0.027403530576788012, 0.03506220467756449,
-    0.040330693153308554, 0.04318681334953267, 0,
+    0.040330693153308554, 0.04318681334953267, 0.0437247997784003,
+    0.04213976040910249, 0.03870883241054338, 0.033770244339933406,
+    0.027701476109967472, 0.02089763744729107, 0.013751068552181367,
+    0.006633013241694939, -0.00012196425782889296, -0.0062283415763344264,
+    -0.011458500270676337, -0.01564800087287013, -0.018697362316561276,
+    -0.020570594078835346, -0.02129085960947034, -0.020933749523185694,
+    -0.019618710755027215, -0.017499213277943633, -0.014752240453738455,
+    -0.011567665365081987, -0.00813802736441628, -0.004649155175939006,
+    -0.0012720002997873648, 0.0018440474959955946, 0.0045761869003028,
+    0.006831493576234213, 0.008548480061993557, 0.009697017641601163,
+    0.010276779766636322, 0.010314421477998086, 0.009859748761770204,
+    0.008981155468606688, 0.007760613711452574, 0.006288497605736688,
+    0.004658501480378907, 0.0029628843619596023, 0.0012882350155569177,
+    -0.0002880913285060006, -0.0017007596413722969, -0.002898407017964739,
+    -0.0038447468026205616, -0.00451885327934322, -0.0049146914166663174, 0,
 ]
 
 const expectedAnimationKeyframesNegative = [
@@ -543,5 +557,18 @@ const expectedAnimationKeyframesWithMax = [
     200.05128936389832, 200.0369127576593, 200.02215521447698,
     200.00775224784672, 199.99435257685846, 199.9824956472612,
     199.97259646942322, 199.96493779532244, 199.95966930684668,
-    199.95681318665046, 200,
+    199.95681318665046, 199.9562752002216, 199.9578602395909,
+    199.96129116758945, 199.96622975566007, 199.97229852389003,
+    199.9791023625527, 199.98624893144782, 199.9933669867583,
+    200.00012196425783, 200.00622834157633, 200.01145850027066,
+    200.01564800087286, 200.01869736231657, 200.02057059407883,
+    200.02129085960948, 200.02093374952318, 200.01961871075503,
+    200.01749921327794, 200.01475224045373, 200.01156766536508,
+    200.00813802736442, 200.00464915517594, 200.0012720002998,
+    199.998155952504, 199.9954238130997, 199.99316850642376, 199.991451519938,
+    199.9903029823584, 199.98972322023337, 199.989685578522, 199.99014025123822,
+    199.9910188445314, 199.99223938628856, 199.99371150239426,
+    199.99534149851962, 199.99703711563805, 199.99871176498445,
+    200.0002880913285, 200.00170075964138, 200.00289840701797,
+    200.00384474680263, 200.00451885327934, 200.00491469141667, 200,
 ]

packages/motion-dom/src/animation/generators/__tests__/spring.test.ts

@@ -233,7 +233,7 @@ describe("toString", () => {
         })
 
         expect(physicsSpring.toString()).toBe(
-            "1100ms linear(0, 0.0419, 0.1493, 0.2963, 0.4608, 0.625, 0.7759, 0.905, 1.0077, 1.0827, 1.1314, 1.1567, 1.1629, 1.1545, 1.1359, 1.1114, 1.0844, 1.0578, 1.0336, 1.0131, 0.9969, 0.9853, 0.9779, 0.9742, 0.9735, 0.9751, 0.9783, 0.9824, 0.9868, 0.9911, 0.995, 0.9982, 1.0008, 1.0026, 1.0037, 1.0043, 1)"
+            "1100ms linear(0, 0.0419, 0.1493, 0.2963, 0.4608, 0.625, 0.7759, 0.905, 1.0077, 1.0827, 1.1314, 1.1567, 1.1629, 1.1545, 1.1359, 1.1114, 1.0844, 1.0578, 1.0336, 1.0131, 0.9969, 0.9853, 0.9779, 0.9742, 0.9735, 0.9751, 0.9783, 0.9824, 0.9868, 0.9911, 0.995, 0.9982, 1.0008, 1.0026, 1.0037, 1, 1)"
         )
 
         const durationSpring = spring({

packages/motion-dom/src/animation/generators/inertia.ts

@@ -4,7 +4,7 @@ import {
     ValueAnimationOptions,
 } from "../types"
 import { spring as createSpring } from "./spring"
-import { calcGeneratorVelocity } from "./utils/velocity"
+import { getGeneratorVelocity } from "./utils/velocity"
 
 export function inertia({
     keyframes,
@@ -73,7 +73,7 @@ export function inertia({
 
         spring = createSpring({
             keyframes: [state.value, nearestBoundary(state.value)!],
-            velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
+            velocity: getGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
             damping: bounceDamping,
             stiffness: bounceStiffness,
             restDelta,