Fix useSpring timing (#2027)

* Attempting fix

* Latest

* Latest

* Updating

* Latest

* Updating test

* Fixing tests

Author: mattgperry

dev/examples/useScroll.tsx

@@ -44,10 +44,32 @@ export const Example = () => {
     const [isComplete, setIsComplete] = useState(false)
     const containerRef = useRef(null)
     const { scrollYProgress } = useElementScroll(containerRef)
-    const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1])
-    const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 })
-
-    useEffect(() => yRange.on("change", (v) => setIsComplete(v >= 1)), [yRange])
+    // const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1])
+    // const pathLength = useSpring(yRange, {
+    //     stiffness: 100,
+    //     damping: 30,
+    //     restDelta: 0.001,
+    // })
+
+    // const { scrollYProgress } = useScroll();
+    const scaleX = useSpring(scrollYProgress, {
+        stiffness: 100,
+        damping: 30,
+        restDelta: 0.001,
+        restSpeed: 0.001,
+    })
+
+    // return (
+    //   <>
+    //     <motion.div className="progress-bar" style={{ scaleX }} />
+    //     <h1>
+    //       <code>useScroll</code> with spring smoothing
+    //     </h1>
+    //     <LoremIpsum />
+    //   </>
+    // );
+
+    // useEffect(() => yRange.on("change", (v) => setIsComplete(v >= 1)), [yRange])
 
     return (
         <div
@@ -61,6 +83,17 @@ export const Example = () => {
                 right: 0,
             }}
         >
+            <motion.div
+                style={{
+                    left: 0,
+                    position: "fixed",
+                    width: "100%",
+                    height: 10,
+                    background: "white",
+                    scaleX,
+                    transformOrigin: "0% 0%",
+                }}
+            />
             <ContentPlaceholder />
             <svg className="progress-icon" viewBox="0 0 60 60">
                 <motion.path
@@ -70,7 +103,7 @@ export const Example = () => {
                     strokeDasharray="0px 10000px"
                     d="M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
                     style={{
-                        pathLength,
+                        // pathLength,
                         rotate: 90,
                         translateX: 5,
                         translateY: 5,

packages/framer-motion/src/value/__tests__/use-spring.test.tsx

@@ -55,7 +55,7 @@ describe("useSpring", () => {
     })
 
     test("creates a spring that animates to the subscribed motion value", async () => {
-        const promise = new Promise((resolve) => {
+        const promise = new Promise<number[]>((resolve) => {
             const output: number[] = []
             const Component = () => {
                 const x = useMotionValue(0)
@@ -86,7 +86,15 @@ describe("useSpring", () => {
 
         const resolved = await promise
 
-        expect(resolved).toEqual([0, 2, 4, 7, 10, 14, 19, 24, 29, 34])
+        const testNear = (value: number, expected: number, deviation = 2) => {
+            expect(
+                value >= expected - deviation && value <= expected + deviation
+            ).toBe(true)
+        }
+
+        testNear(resolved[0], 0)
+        testNear(resolved[4], 8)
+        testNear(resolved[8], 25)
     })
 
     test("will not animate if immediate=true", async () => {

packages/framer-motion/src/value/use-spring.ts

@@ -7,6 +7,8 @@ import { SpringOptions } from "../animation/types"
 import { useIsomorphicLayoutEffect } from "../utils/use-isomorphic-effect"
 import { AnimationPlaybackControls } from "../animation/types"
 import { animateValue } from "../animation/animators/js"
+import { frameData } from "../frameloop/data"
+import { millisecondsToSeconds } from "../utils/time-conversion"
 
 /**
  * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
@@ -61,6 +63,18 @@ export function useSpring(
                 onUpdate: set,
             })
 
+            /**
+             * If we're between frames, resync the animation to the frameloop.
+             */
+            if (!frameData.isProcessing) {
+                const delta = performance.now() - frameData.timestamp
+
+                if (delta < 30) {
+                    activeSpringAnimation.current.time =
+                        millisecondsToSeconds(delta)
+                }
+            }
+
             return value.get()
         }, stopAnimation)
     }, [JSON.stringify(config)])