Fixing reverse after setting speed on a finished animation

mattgperry · mattgperry · commit 5bdcc756fc15 · 2025-04-24T15:07:17.000+02:00
diff --git a/dev/html/public/playwright/animate/animate-play-again-speed.html b/dev/html/public/playwright/animate/animate-play-again-speed.html
@@ -0,0 +1,69 @@
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0;
+                font-family: sans-serif;
+                display: flex;
+                gap: 10px;
+                flex-direction: column;
+            }
+
+            .box {
+                width: 100px;
+                height: 100px;
+                background-color: #0077ff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box" id="mini">mini</div>
+        <div class="box" id="js">js</div>
+        <div class="box" id="waapi">waapi</div>
+        <script type="module" src="/src/inc.js"></script>
+        <script type="module">
+            const { animateMini, animate, delay } = window.Motion
+
+            const options = {
+                duration: 1,
+                ease: "linear",
+            }
+
+            const mini = animateMini(
+                "#mini",
+                {
+                    transform: "translateX(100px)",
+                },
+                options
+            )
+            const js = animate("#js", { x: 100 }, options)
+            const waapi = animate(
+                "#waapi",
+                { transform: "translateX(100px)" },
+                options
+            )
+
+            mini.finished.then(() => {
+                delay(() => {
+                    mini.speed = -1
+                    js.speed = -1
+                    waapi.speed = -1
+
+                    mini.play()
+                    js.play()
+                    waapi.play()
+                }, 0.2)
+            })
+
+            delay(() => {
+                mini.complete()
+                js.complete()
+                waapi.complete()
+            }, 0.1)
+        </script>
+    </body>
+</html>
diff --git a/packages/motion-dom/src/animation/JSAnimation.ts b/packages/motion-dom/src/animation/JSAnimation.ts
@@ -395,11 +395,12 @@ export class JSAnimation<T extends number | string>
         onPlay && onPlay()
 
         const now = this.driver.now()
-        if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime
-        } else if (this.state === "finished") {
+
+        if (this.state === "finished") {
             this.updateFinished()
             this.startTime = now
+        } else if (this.holdTime !== null) {
+            this.startTime = now - this.holdTime
         } else if (!this.startTime) {
             this.startTime = startTime ?? now
         }
diff --git a/tests/animate/animate.spec.ts b/tests/animate/animate.spec.ts
@@ -74,6 +74,20 @@ test.describe("animate() methods", () => {
         })
     })
 
+    test("play after finished and setting speed", async ({ page }) => {
+        await waitForAnimation(
+            "animate/animate-play-again-speed.html",
+            page,
+            600
+        )
+        await eachBox(page, async (box) => {
+            const boundingBox = await box.boundingBox()
+            expect(boundingBox?.x).not.toBeCloseTo(0)
+            const text = await box.innerText()
+            expect(text).not.toBe("error")
+        })
+    })
+
     test("play after setting speed", async ({ page }) => {
         await waitForAnimation("animate/animate-play-negative-speed.html", page)
         await eachBox(page, async (box) => {
