fix: Add animationCancel event for interrupted spring animations

Author: rick-hup

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

@@ -278,4 +278,34 @@ describe("useSpring animation events", () => {
 
         await expect(promise).resolves.toBe(true)
     })
+
+    test("triggers animationCancel event when spring animation is interrupted", async () => {
+        const promise = new Promise<boolean>((resolve) => {
+            const Component = () => {
+                const x = useMotionValue(0)
+                const springX = useSpring(x, {
+                    stiffness: 100,
+                    damping: 10,
+                })
+
+                useMotionValueEvent(springX, "animationCancel", () => {
+                    resolve(true)
+                })
+
+                useEffect(() => {
+                    x.set(100)
+                    // Interrupt the animation by setting a new value
+                    setTimeout(() => {
+                        x.set(50)
+                    }, 10)
+                }, [x])
+
+                return null
+            }
+
+            render(<Component />)
+        })
+
+        await expect(promise).resolves.toBe(true)
+    })
 })

packages/motion-dom/src/value/spring-value.ts

@@ -50,6 +50,7 @@ export function attachSpring<T extends AnyResolvedKeyframe>(
         if (activeAnimation) {
             activeAnimation.stop()
             activeAnimation = null
+            value['events'].animationCancel?.notify()
         }
     }
     const startAnimation = () => {