Fixing sequencing of motion values (#2482)

* Fixing sequencing of motion values * Fixing package * Updating test * Updating lockfile
motiondivision · Jan 9, 2024 · b414e83 · b414e83
1 parent 4623edf
commit b414e83
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/packages/framer-motion/src/animation/__tests__/animate.test.tsx b/packages/framer-motion/src/animation/__tests__/animate.test.tsx
@@ -112,6 +112,33 @@ describe("animate", () => {
         animate(motionValue("#fff"), ["#fff", "#000"])
     })
 
+    test("animates a motion value in sequence", async () => {
+        const a = motionValue(0)
+
+        const aOutput: number[] = []
+
+        a.on("change", (v) => aOutput.push(Math.round(v)))
+
+        const animation = animate(
+            [
+                [a, 2, { duration: 0.2 }],
+                [a, 0, { duration: 0.2 }],
+            ],
+            {
+                defaultTransition: {
+                    ease: "linear",
+                    driver: syncDriver(20),
+                },
+            }
+        )
+
+        return animation.then(() => {
+            expect(aOutput).toEqual([
+                0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 0, 0, 0,
+            ])
+        })
+    })
+
     test("animates motion values in sequence", async () => {
         const a = motionValue(0)
         const b = motionValue(100)
@@ -138,7 +165,7 @@ describe("animate", () => {
 
         return animation.then(() => {
             expect(aOutput).toEqual([50, 70, 90, 100])
-            expect(bOutput).toEqual([60, 20, 0])
+            expect(bOutput).toEqual([80, 40, 0])
         })
     })
 

diff --git a/packages/framer-motion/src/animation/sequence/create.ts b/packages/framer-motion/src/animation/sequence/create.ts
@@ -230,10 +230,10 @@ export function createAnimationsFromSequence(
                     )
                 }
             }
-
-            prevTime = currentTime
-            currentTime += maxDuration
         }
+
+        prevTime = currentTime
+        currentTime += maxDuration
     }
 
     /**

diff --git a/yarn.lock b/yarn.lock
@@ -7993,8 +7993,8 @@ __metadata:
     cache-loader: ^1.2.5
     convert-tsconfig-paths-to-webpack-aliases: ^0.9.2
     fork-ts-checker-webpack-plugin: ^6.2.0
-    framer-motion: ^10.17.9
-    framer-motion-3d: ^10.17.9
+    framer-motion: ^10.17.11
+    framer-motion-3d: ^10.17.11
     path-browserify: ^1.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
@@ -8060,14 +8060,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion-3d@^10.17.9, framer-motion-3d@workspace:packages/framer-motion-3d":
+"framer-motion-3d@^10.17.11, framer-motion-3d@workspace:packages/framer-motion-3d":
   version: 0.0.0-use.local
   resolution: "framer-motion-3d@workspace:packages/framer-motion-3d"
   dependencies:
     "@react-three/fiber": ^8.2.2
     "@react-three/test-renderer": ^9.0.0
     "@rollup/plugin-commonjs": ^22.0.1
-    framer-motion: ^10.17.9
+    framer-motion: ^10.17.11
     react-merge-refs: ^2.0.1
   peerDependencies:
     "@react-three/fiber": ^8.2.2
@@ -8077,7 +8077,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion@^10.17.9, framer-motion@workspace:packages/framer-motion":
+"framer-motion@^10.17.11, framer-motion@workspace:packages/framer-motion":
   version: 0.0.0-use.local
   resolution: "framer-motion@workspace:packages/framer-motion"
   dependencies: