From 47e9dedc2f4174ebe593d20d2e8d2a6e5c52595a Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Mon, 2 Jan 2023 14:07:50 +0100
Subject: [PATCH 1/2] Fixing keyframes

---
 .../animation/legacy-popmotion/keyframes.ts   |  9 ++++----
 .../__tests__/transition-keyframes.test.tsx   | 22 +++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/framer-motion/src/animation/legacy-popmotion/keyframes.ts b/packages/framer-motion/src/animation/legacy-popmotion/keyframes.ts
index be2a8937b6..cb3d21b414 100644
--- a/packages/framer-motion/src/animation/legacy-popmotion/keyframes.ts
+++ b/packages/framer-motion/src/animation/legacy-popmotion/keyframes.ts
@@ -31,8 +31,6 @@ export function keyframes({
 }: AnimationOptions): Animation<number | string> {
     keyframeValues = [...keyframeValues]
 
-    const origin = keyframes[0]
-
     /**
      * Easing functions can be externally defined as strings. Here we convert them
      * into actual functions.
@@ -45,7 +43,10 @@ export function keyframes({
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
      */
-    const state: AnimationState<typeof origin> = { done: false, value: origin }
+    const state: AnimationState<typeof origin> = {
+        done: false,
+        value: keyframeValues[0],
+    }
 
     /**
      * Create a times array based on the provided 0-1 offsets
@@ -53,7 +54,7 @@ export function keyframes({
     const absoluteTimes = convertOffsetToTimes(
         // Only use the provided offsets if they're the correct length
         // TODO Maybe we should warn here if there's a length mismatch
-        times && times.length === keyframes.length
+        times && times.length === keyframeValues.length
             ? times
             : defaultOffset(keyframeValues),
         duration
diff --git a/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx b/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
index ed06472234..f66f91e805 100644
--- a/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
+++ b/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
@@ -114,4 +114,26 @@ describe("keyframes transition", () => {
 
         expect(xResult).toBe(50)
     })
+
+    test("times works as expected", async () => {
+        const values = await new Promise<number[]>((resolve) => {
+            const output: number[] = []
+
+            const Component = () => (
+                <motion.div
+                    animate={{ x: [50, 100, 200, 300] }}
+                    transition={{ duration: 0.1, times: [0, 0.1, 0.9, 1] }}
+                    onUpdate={(latest) =>
+                        output.push(Math.round(latest.x as number))
+                    }
+                    onAnimationComplete={() => resolve(output)}
+                />
+            )
+
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        expect(values).toEqual([101, 119, 154, 186, 200, 300])
+    })
 })

From 9ed253fec2bb261f70898be8932e22e9e25eb939 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Mon, 2 Jan 2023 15:20:12 +0100
Subject: [PATCH 2/2] Updating test

---
 .../src/motion/__tests__/transition-keyframes.test.tsx       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx b/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
index f66f91e805..11a008065c 100644
--- a/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
+++ b/packages/framer-motion/src/motion/__tests__/transition-keyframes.test.tsx
@@ -122,7 +122,7 @@ describe("keyframes transition", () => {
             const Component = () => (
                 <motion.div
                     animate={{ x: [50, 100, 200, 300] }}
-                    transition={{ duration: 0.1, times: [0, 0.1, 0.9, 1] }}
+                    transition={{ duration: 0.1, times: [0, 0, 1, 1] }}
                     onUpdate={(latest) =>
                         output.push(Math.round(latest.x as number))
                     }
@@ -134,6 +134,7 @@ describe("keyframes transition", () => {
             rerender(<Component />)
         })
 
-        expect(values).toEqual([101, 119, 154, 186, 200, 300])
+        expect(values[0] >= 100).toBe(true)
+        expect(values[values.length - 2] <= 200).toBe(true)
     })
 })