Fixing cancel() after stop()

Author: mattgperry

Makefile

@@ -95,7 +95,7 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9991 "cd packages/framer-motion && cypress run --config-file=cypress.react-19.json --headed --spec cypress/integration/scroll.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9991 "cd packages/framer-motion && cypress run --config-file=cypress.react-19.json --headed --spec cypress/integration/animate-cancel.ts"
 
 lint: bootstrap
 	yarn lint

dev/react/src/tests/animate-cancel.tsx

@@ -0,0 +1,36 @@
+import { useAnimate } from "framer-motion"
+import { StrictMode, useEffect } from "react"
+
+function Test() {
+    const [scope, animate] = useAnimate()
+
+    useEffect(() => {
+        const controls = animate(scope.current, { opacity: 0 }, { duration: 2 })
+        return () => {
+            try {
+                controls.cancel()
+            } catch (e) {
+                if (scope.current) {
+                    scope.current.innerHTML = "error"
+                }
+                console.error(e)
+            }
+        }
+    }, [])
+
+    return (
+        <div
+            ref={scope}
+            className="box"
+            style={{ width: "2rem", height: "2rem", background: "red" }}
+        />
+    )
+}
+
+export function App() {
+    return (
+        <StrictMode>
+            <Test />
+        </StrictMode>
+    )
+}

packages/framer-motion/cypress/integration/animate-cancel.ts

@@ -0,0 +1,8 @@
+describe("animation.cancel()", () => {
+    it("Doesn't throw error on unmount", () => {
+        cy.visit("?test=animate-cancel")
+            .get(".box")
+            .wait(100)
+            .should("not.contain", "error")
+    })
+})

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

@@ -191,6 +191,7 @@ export class AsyncMotionValueAnimation<T extends string | number>
 
     get animation(): AnimationPlaybackControls {
         if (!this._animation) {
+            this.keyframeResolver?.resume()
             flushKeyframeResolvers()
         }
 
@@ -248,7 +249,11 @@ export class AsyncMotionValueAnimation<T extends string | number>
     }
 
     cancel() {
-        this.animation.cancel()
+        if (this._animation) {
+            this.animation.cancel()
+        }
+
+        this.keyframeResolver?.cancel()
     }
 
     /**
@@ -258,8 +263,8 @@ export class AsyncMotionValueAnimation<T extends string | number>
         if (this._animation) {
             this._animation.stop()
             this.stopTimeline?.()
-        } else {
-            this.keyframeResolver?.cancel()
         }
+
+        this.keyframeResolver?.cancel()
     }
 }

packages/motion-dom/src/animation/keyframes/KeyframesResolver.ts

@@ -109,11 +109,7 @@ export class KeyframeResolver<T extends string | number = any> {
     private motionValue?: MotionValue<T>
     private onComplete: OnKeyframesResolved<T>
 
-    /**
-     * Track whether this resolver has completed. Once complete, it never
-     * needs to attempt keyframe resolution again.
-     */
-    private isComplete = false
+    state: "pending" | "scheduled" | "complete" = "pending"
 
     /**
      * Track whether this resolver is async. If it is, it'll be added to the
@@ -128,12 +124,6 @@ export class KeyframeResolver<T extends string | number = any> {
      */
     needsMeasurement = false
 
-    /**
-     * Track whether this resolver is currently scheduled to resolve
-     * to allow it to be cancelled and resumed externally.
-     */
-    isScheduled = false
-
     constructor(
         unresolvedKeyframes: UnresolvedKeyframes<string | number>,
         onComplete: OnKeyframesResolved<T>,
@@ -151,7 +141,7 @@ export class KeyframeResolver<T extends string | number = any> {
     }
 
     scheduleResolve() {
-        this.isScheduled = true
+        this.state = "scheduled"
 
         if (this.isAsync) {
             toResolve.add(this)
@@ -205,26 +195,26 @@ export class KeyframeResolver<T extends string | number = any> {
     renderEndStyles() {}
     measureEndState() {}
 
-    complete(isForced = false) {
-        this.isComplete = true
+    complete(isForcedComplete = false) {
+        this.state = "complete"
 
         this.onComplete(
             this.unresolvedKeyframes as ResolvedKeyframes<T>,
             this.finalKeyframe as T,
-            isForced
+            isForcedComplete
         )
 
         toResolve.delete(this)
     }
 
     cancel() {
-        if (!this.isComplete) {
-            this.isScheduled = false
+        if (this.state === "scheduled") {
             toResolve.delete(this)
+            this.state = "pending"
         }
     }
 
     resume() {
-        if (!this.isComplete) this.scheduleResolve()
+        if (this.state === "pending") this.scheduleResolve()
     }
 }