Explicitly check if animations completed

packages/framer-motion/src/animation/interfaces/visual-element-target.ts

@@ -43,6 +43,7 @@ export function animateTarget(
     if (transitionOverride) transition = transitionOverride
 
     const animations: AnimationPlaybackControls[] = []
+    const promises: (Promise<void>)[] = []
 
     const animationTypeState =
         type &&
@@ -101,10 +102,19 @@ export function animateTarget(
         }
 
         animations.push(animation)
+        promises.push(new Promise((resolve) => {
+            const subscriptions: (() => void)[] = []
+            const unsubscribe = () => subscriptions.forEach((fn) => fn())
+            subscriptions.push(value.on('animationComplete', () => {
+                unsubscribe()
+                resolve()
+            }))
+            subscriptions.push(value.on('animationCancel', unsubscribe))
+        }))
     }
 
     if (transitionEnd) {
-        Promise.all(animations).then(() => {
+        Promise.all(promises).then(() => {
             transitionEnd && setTarget(visualElement, transitionEnd)
         })
     }

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

@@ -136,6 +136,33 @@ describe("animate prop as object", () => {
         })
         return expect(promise).resolves.toBe(300)
     })
+    test("uses the latest styles on subsequent renders", async () => {
+        const promise = new Promise((resolve) => {
+            const x = motionValue(0)
+            const Component = ({ animate }: any) => (
+                <motion.div animate={animate} style={{ x }} />
+            )
+            const { rerender } = render(
+                <Component
+                    animate={{
+                        x: 10,
+                        transition: { type: false },
+                        transitionEnd: { x: 100 },
+                    }}
+                />
+            )
+            rerender(
+                <Component
+                    animate={{
+                        x: 20,
+                        transition: { type: false },
+                    }}
+                />
+            )
+            requestAnimationFrame(() => resolve(x.get()))
+        })
+        return expect(promise).resolves.toBe(20)
+    })
     test("animates to set prop and preserves existing initial transform props", async () => {
         const promise = new Promise((resolve) => {
             const onComplete = () => {