Fixing timeline with label as first segment (#2985)

motiondivision · Jan 10, 2025 · 888619c · 888619c
1 parent 3449bd1
commit 888619c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/dev/react/src/examples/Animation-reverse.tsx b/dev/react/src/examples/Animation-reverse.tsx
@@ -12,11 +12,10 @@ export const App = () => {
             <p>reverse</p>
             <button
                 onClick={() => {
-                    const animation = animate(
-                        ".four",
-                        { x: 90 },
-                        { duration: 2 }
-                    )
+                    const animation = animate([
+                        "my label",
+                        [".four", { x: 90 }, { duration: 2 }],
+                    ])
                     animation.time = animation.duration
                     animation.speed = -1
                 }}

diff --git a/packages/framer-motion/src/animation/__tests__/animate-waapi.test.ts b/packages/framer-motion/src/animation/__tests__/animate-waapi.test.ts
@@ -160,6 +160,7 @@ describe("animate() with WAAPI", () => {
         const b = document.createElement("div")
 
         animate([
+            "label",
             [
                 [a, b],
                 { opacity: [0, 1], transform: ["scale(0)", "scale(1)"] },

diff --git a/packages/framer-motion/src/animation/animate/index.ts b/packages/framer-motion/src/animation/animate/index.ts
@@ -18,7 +18,7 @@ import { animateSequence } from "./sequence"
 import { animateSubject } from "./subject"
 
 function isSequence(value: unknown): value is AnimationSequence {
-    return Array.isArray(value) && Array.isArray(value[0])
+    return Array.isArray(value) && value.some(Array.isArray)
 }
 
 /**

diff --git a/packages/framer-motion/src/animation/sequence/__tests__/index.test.ts b/packages/framer-motion/src/animation/sequence/__tests__/index.test.ts
@@ -1,8 +1,8 @@
 import { Easing } from "../../../easing/types"
 import { motionValue } from "../../../value"
+import { spring } from "../../generators/spring"
 import { stagger } from "../../utils/stagger"
 import { createAnimationsFromSequence } from "../create"
-import { spring } from "../../generators/spring"
 
 describe("createAnimationsFromSequence", () => {
     const a = document.createElement("div")
@@ -331,6 +331,33 @@ describe("createAnimationsFromSequence", () => {
         })
     })
 
+    test("Can set label as first item in sequence", () => {
+        const animations = createAnimationsFromSequence(
+            [
+                "my label",
+                [a, { opacity: 0 }, { duration: 1 }],
+                [b, { y: 500 }, { duration: 1, at: "my label" }],
+            ],
+            undefined,
+            undefined,
+            { spring }
+        )
+
+        expect(animations.get(a)!.keyframes.opacity).toEqual([null, 0])
+        expect(animations.get(a)!.transition.opacity).toEqual({
+            duration: 1,
+            ease: ["easeOut", "easeOut"],
+            times: [0, 1],
+        })
+
+        expect(animations.get(b)!.keyframes.y).toEqual([null, 500])
+        expect(animations.get(b)!.transition.y).toEqual({
+            duration: 1,
+            ease: ["easeOut", "easeOut"],
+            times: [0, 1],
+        })
+    })
+
     test("It sets annotated labels with absolute at times", () => {
         const animations = createAnimationsFromSequence(
             [