From 2d6852407c291f3082fe5a56b5ede548ab044448 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Wed, 29 May 2024 14:19:26 +0200
Subject: [PATCH] Ensuring instant animations return animation controls (#2687)

* Updating

* Returning controls
---
 .../framer-motion/src/animation/GroupPlaybackControls.ts | 5 ++---
 .../src/animation/interfaces/motion-value.ts             | 9 ++++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/framer-motion/src/animation/GroupPlaybackControls.ts b/packages/framer-motion/src/animation/GroupPlaybackControls.ts
index ec0608ed14..9d370c80e2 100644
--- a/packages/framer-motion/src/animation/GroupPlaybackControls.ts
+++ b/packages/framer-motion/src/animation/GroupPlaybackControls.ts
@@ -93,9 +93,8 @@ export class GroupPlaybackControls implements AnimationPlaybackControls {
         this.runAll("pause")
     }
 
-    stop() {
-        this.runAll("stop")
-    }
+    // Bound to accomodate common `return animation.stop` pattern
+    stop = () => this.runAll("stop")
 
     cancel() {
         this.runAll("cancel")
diff --git a/packages/framer-motion/src/animation/interfaces/motion-value.ts b/packages/framer-motion/src/animation/interfaces/motion-value.ts
index f3dd44b999..bc9c3baf10 100644
--- a/packages/framer-motion/src/animation/interfaces/motion-value.ts
+++ b/packages/framer-motion/src/animation/interfaces/motion-value.ts
@@ -3,7 +3,7 @@ import { secondsToMilliseconds } from "../../utils/time-conversion"
 import type { MotionValue, StartAnimation } from "../../value"
 import { getDefaultTransition } from "../utils/default-transitions"
 import { getValueTransition, isTransitionDefined } from "../utils/transitions"
-import { ValueAnimationOptions } from "../types"
+import { AnimationPlaybackControls, ValueAnimationOptions } from "../types"
 import type { UnresolvedKeyframes } from "../../render/utils/KeyframesResolver"
 import { MotionGlobalConfig } from "../../utils/GlobalConfig"
 import { instantAnimationState } from "../../utils/use-instant-transition-state"
@@ -12,6 +12,7 @@ import { getFinalKeyframe } from "../animators/waapi/utils/get-final-keyframe"
 import { frame } from "../../frameloop/frame"
 import { AcceleratedAnimation } from "../animators/AcceleratedAnimation"
 import { MainThreadAnimation } from "../animators/MainThreadAnimation"
+import { GroupPlaybackControls } from "../GroupPlaybackControls"
 
 export const animateMotionValue =
     <V extends string | number>(
@@ -22,7 +23,7 @@ export const animateMotionValue =
         element?: VisualElement<any>,
         isHandoff?: boolean
     ): StartAnimation =>
-    (onComplete) => {
+    (onComplete): AnimationPlaybackControls => {
         const valueTransition = getValueTransition(transition, name) || {}
 
         /**
@@ -124,7 +125,9 @@ export const animateMotionValue =
                     options.onComplete!()
                 })
 
-                return
+                // We still want to return some animation controls here rather
+                // than returning undefined
+                return new GroupPlaybackControls([])
             }
         }