Adding complete (#2026)

Author: mattgperry

packages/framer-motion/src/animation/GroupPlaybackControls.ts

@@ -54,4 +54,8 @@ export class GroupPlaybackControls implements AnimationPlaybackControls {
     cancel() {
         this.runAll("cancel")
     }
+
+    complete() {
+        this.runAll("complete")
+    }
 }

packages/framer-motion/src/animation/__tests__/GroupPlaybackControls.test.ts

@@ -12,6 +12,7 @@ function createTestAnimationControls(
         then: (resolve: VoidFunction) => {
             return Promise.resolve().then(resolve)
         },
+        complete: () => {},
         cancel: () => {},
         ...partialControls,
     }
@@ -147,4 +148,20 @@ describe("GroupPlaybackControls", () => {
         expect(a.cancel).toBeCalled()
         expect(b.cancel).toBeCalled()
     })
+
+    test("Calls complete on all animations", async () => {
+        const a = createTestAnimationControls({
+            complete: jest.fn(),
+        })
+        const b = createTestAnimationControls({
+            complete: jest.fn(),
+        })
+
+        const controls = new GroupPlaybackControls([a, b])
+
+        controls.complete()
+
+        expect(a.complete).toBeCalled()
+        expect(b.complete).toBeCalled()
+    })
 })

packages/framer-motion/src/animation/animators/instant.ts

@@ -23,6 +23,7 @@ export function createInstantAnimation<V>({
                 return Promise.resolve()
             },
             cancel: noop<void>,
+            complete: noop<void>,
         }
     }
 

packages/framer-motion/src/animation/animators/js/__tests__/animate.test.ts

@@ -1091,4 +1091,25 @@ describe("animate", () => {
 
         expect(output).toEqual([0, 20, 40, 0])
     })
+
+    test("Correctly completes an animation", async () => {
+        const output: number[] = []
+
+        const animation = animateValue({
+            keyframes: [0, 100],
+            driver: syncDriver(20),
+            duration: 100,
+            ease: linear,
+            onUpdate: (v) => {
+                output.push(v)
+                if (v === 40) {
+                    animation.complete()
+                }
+            },
+        })
+
+        await animation
+
+        expect(output).toEqual([0, 20, 40, 100])
+    })
 })

packages/framer-motion/src/animation/animators/js/index.ts

@@ -219,12 +219,6 @@ export function animateValue<V = number>({
         const state = frameGenerator.next(elapsed)
         let { value, done } = state
 
-        if (onUpdate) {
-            onUpdate(
-                mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value
-            )
-        }
-
         if (calculatedDuration !== null) {
             done = time >= totalDuration
         }
@@ -233,6 +227,12 @@ export function animateValue<V = number>({
             holdTime === null &&
             (playState === "finished" || (playState === "running" && done))
 
+        if (onUpdate) {
+            onUpdate(
+                mapNumbersToKeyframes ? mapNumbersToKeyframes(value) : value
+            )
+        }
+
         if (isAnimationFinished) {
             finish()
         }
@@ -321,6 +321,10 @@ export function animateValue<V = number>({
             if (cancelTime !== null) tick(cancelTime)
             cancel()
         },
+        complete: () => {
+            playState = "finished"
+            holdTime === null
+        },
         sample: (elapsed: number) => {
             startTime = 0
             return tick(elapsed)!

packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts

@@ -191,6 +191,7 @@ export function createAcceleratedAnimation(
             }
             safeCancel()
         },
+        complete: () => animation.finish(),
         cancel: safeCancel,
     }
 }

packages/framer-motion/src/animation/types.ts

@@ -34,6 +34,7 @@ export interface AnimationPlaybackControls {
     stop: () => void
     play: () => void
     pause: () => void
+    complete: () => void
     cancel: () => void
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>
 }