.stop() applies permanently (#2030)

* Stopping animations permanenently * Fix * Updating
framer · Mar 17, 2023 · 7d304f8 · 7d304f8
1 parent 273d9e4
commit 7d304f8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/packages/framer-motion/src/animation/animators/js/__tests__/animate.test.ts b/packages/framer-motion/src/animation/animators/js/__tests__/animate.test.ts
@@ -1002,6 +1002,30 @@ describe("animate", () => {
         expect(output).toEqual([0, 20, 40, 60, 80, 100, 0, 20, 40, 60, 80, 100])
     })
 
+    test(".play() doesn't start the animation if it has been manually stopped", async () => {
+        const driver = syncDriver(20)
+        const output: number[] = []
+        const animation = animateValue({
+            keyframes: [0, 100],
+            duration: 100,
+            ease: "linear",
+            onUpdate: (v) => {
+                output.push(Math.round(v))
+
+                if (output.length === 5) animation.stop()
+            },
+            driver,
+        })
+
+        await nextFrame()
+
+        animation.play()
+
+        await nextFrame()
+
+        expect(output).toEqual([0, 20, 40, 60, 80])
+    })
+
     test(".then() can be chained", async () => {
         return new Promise(async (resolve) => {
             const animation = animateValue({

diff --git a/packages/framer-motion/src/animation/animators/js/index.ts b/packages/framer-motion/src/animation/animators/js/index.ts
@@ -70,6 +70,7 @@ export function animateValue<V = number>({
 }: AnimationOptions<V>): MainThreadAnimationControls<V> {
     let speed = 1
 
+    let hasStopped = false
     let resolveFinishedPromise: VoidFunction
     let currentFinishedPromise: Promise<void>
 
@@ -271,6 +272,8 @@ export function animateValue<V = number>({
     }
 
     const play = () => {
+        if (hasStopped) return
+
         if (!animationDriver) animationDriver = driver(tick)
 
         const now = animationDriver.now()
@@ -331,6 +334,7 @@ export function animateValue<V = number>({
             holdTime = time
         },
         stop: () => {
+            hasStopped = true
             if (playState === "idle") return
             playState = "idle"
             onStop && onStop()

diff --git a/packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts b/packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts
@@ -63,6 +63,7 @@ export function createAcceleratedAnimation(
     /**
      * TODO: Unify with js/index
      */
+    let hasStopped = false
     let resolveFinishedPromise: VoidFunction
     let currentFinishedPromise: Promise<void>
 
@@ -168,9 +169,13 @@ export function createAcceleratedAnimation(
         set speed(newSpeed: number) {
             animation.playbackRate = newSpeed
         },
-        play: () => animation.play(),
+        play: () => {
+            if (hasStopped) return
+            animation.play()
+        },
         pause: () => animation.pause(),
         stop: () => {
+            hasStopped = true
             if (animation.playState === "idle") return
 
             /**