Merge pull request #3313 from motiondivision/fix/spring-value-cleanup

mattgperry · web-flow · commit 6bdff147dd91 · 2025-07-23T15:52:52.000+02:00
Fix `springValue` cleanup
diff --git a/packages/motion-dom/src/value/__tests__/spring-value.test.ts b/packages/motion-dom/src/value/__tests__/spring-value.test.ts
@@ -1,6 +1,6 @@
 import { syncDriver } from "../../animation/__tests__/utils"
 import { motionValue } from "../index"
-import { springValue } from "../spring-value"
+import { attachSpring, springValue } from "../spring-value"
 
 describe("springValue types", () => {
     test("can create a motion value from a number", () => {
@@ -140,16 +140,49 @@ const runSpringTests = (unit?: string | undefined) => {
             expect(resolved).toEqual([createValue(100)])
         })
 
-        test("unsubscribes when destroyed", () => {
-            const a = motionValue(createValue(0))
+        test("unsubscribes when spring is destroyed", () => {
+            const source = motionValue(createValue(0))
+            const spring = springValue(source)
 
-            const b = springValue(a)
-            springValue(a)
+            expect((source as any).events.change.getSize()).toBe(1)
+            expect((spring as any).events.destroy.getSize()).toBe(1)
 
-            b.destroy()
+            spring.destroy()
 
             // Cast to any here as `.events` is private API
-            expect((a as any).events.change.getSize()).toBe(1)
+            expect((source as any).events.change.getSize()).toBe(0)
+            expect((spring as any).events.destroy.getSize()).toBe(0)
+        })
+
+        test("unsubscribes when source is destroyed", () => {
+            const source = motionValue(createValue(0))
+            springValue(source)
+
+            expect((source as any).events.change.getSize()).toBe(1)
+
+            source.destroy()
+
+            // Cast to any here as `.events` is private API
+            expect((source as any).events.change.getSize()).toBe(0)
+        })
+
+        test("Cleanup function works as expected", () => {
+            const source = motionValue(createValue(0))
+            const spring = motionValue(createValue(0))
+
+            const clean = attachSpring(spring, source)
+            clean()
+            const clean2 = attachSpring(spring, source)
+
+            expect((source as any).events.change.getSize()).toBe(1)
+            expect((spring as any).events.destroy.getSize()).toBe(1)
+
+            clean2()
+            const clean3 = attachSpring(spring, source)
+            clean3()
+
+            expect((source as any).events.change.getSize()).toBe(0)
+            expect((spring as any).events.destroy.getSize()).toBe(0)
         })
     })
 }
diff --git a/packages/motion-dom/src/value/spring-value.ts b/packages/motion-dom/src/value/spring-value.ts
@@ -34,7 +34,7 @@ export function attachSpring<T extends AnyResolvedKeyframe>(
     value: MotionValue<T>,
     source: T | MotionValue<T>,
     options?: SpringOptions
-) {
+): VoidFunction {
     const initialValue = value.get()
 
     let activeAnimation: JSAnimation<number> | null = null
@@ -75,15 +75,20 @@ export function attachSpring<T extends AnyResolvedKeyframe>(
         return value.get()
     }, stopAnimation)
 
-    let unsubscribe: VoidFunction | undefined = undefined
     if (isMotionValue(source)) {
-        unsubscribe = source.on("change", (v) =>
+        const removeSourceOnChange = source.on("change", (v) =>
             value.set(parseValue(v, unit) as T)
         )
-        value.on("destroy", unsubscribe)
+
+        const removeValueOnDestroy = value.on("destroy", removeSourceOnChange)
+
+        return () => {
+            removeSourceOnChange()
+            removeValueOnDestroy()
+        }
     }
 
-    return unsubscribe
+    return stopAnimation
 }
 
 function parseValue(v: AnyResolvedKeyframe, unit?: string) {
