Fix times (#1859)

* Fixing keyframes * Updating test
framer · Jan 2, 2023 · c63870d · c63870d
1 parent 4f03382
commit c63870d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git 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,15 +43,18 @@ 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
      */
     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
@@ -114,4 +114,27 @@ 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, 1] }}
+                    onUpdate={(latest) =>
+                        output.push(Math.round(latest.x as number))
+                    }
+                    onAnimationComplete={() => resolve(output)}
+                />
+            )
+
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        expect(values[0] >= 100).toBe(true)
+        expect(values[values.length - 2] <= 200).toBe(true)
+    })
 })