Merge pull request #3343 from rortan134/fix-3337

fix: Deduplicate animate() onComplete: fire once after group completion

Author: mattgperry

packages/framer-motion/src/animation/animate/__tests__/animate.test.tsx

@@ -337,6 +337,40 @@ describe("animate", () => {
         expect(max).toBeGreaterThan(2)
         expect(value.get()).toBe(0)
     })
+
+    test("top-level onComplete fires once when some props are equal and others animate", async () => {
+        const calls: number[] = []
+
+        const proxy = new Proxy(
+            { x: 0, y: 0 },
+            {
+                set: (target, p: string, newValue: any) => {
+                    if (p === "x" || p === "y") {
+                        ;(target as any)[p] = newValue
+                    }
+                    return true
+                },
+            }
+        )
+
+        const anim = animate(
+            proxy,
+            { x: 100, y: 0 },
+            {
+                duration: 0.05,
+                onComplete: () => {
+                    calls.push(performance.now())
+                },
+            }
+        )
+
+        await anim.finished
+
+        expect(calls.length).toBe(1)
+        // And ensure final state reached
+        expect(proxy.x).toBeGreaterThanOrEqual(100)
+        expect(proxy.y).toBe(0)
+    })
 })
 
 describe("animate: Objects", () => {

packages/framer-motion/src/animation/animate/index.ts

@@ -101,6 +101,7 @@ export function createScopedAnimate(scope?: AnimationScope) {
             | DynamicAnimationOptions
     ): AnimationPlaybackControlsWithThen {
         let animations: AnimationPlaybackControlsWithThen[] = []
+        let groupOnComplete: VoidFunction | undefined
 
         if (isSequence(subjectOrSequence)) {
             animations = animateSequence(
@@ -109,16 +110,27 @@ export function createScopedAnimate(scope?: AnimationScope) {
                 scope
             )
         } else {
+            // Extract top-level onComplete so it doesn't get applied per-value
+            const { onComplete, ...rest } = options || {}
+            if (typeof onComplete === "function") {
+                groupOnComplete = onComplete as VoidFunction
+            }
             animations = animateSubject(
                 subjectOrSequence as ElementOrSelector,
                 optionsOrKeyframes as DOMKeyframesDefinition,
-                options as DynamicAnimationOptions,
+                rest as DynamicAnimationOptions,
                 scope
             )
         }
 
         const animation = new GroupAnimationWithThen(animations)
 
+        if (groupOnComplete) {
+            animation.finished.then(() => {
+                groupOnComplete?.()
+            })
+        }
+
         if (scope) {
             scope.animations.push(animation)
             animation.finished.then(() => {