Merge pull request #3250 from piotrjoniec/main

mattgperry · web-flow · commit a9f3553c269b · 2025-06-12T15:16:39.000+02:00
Add support for defining a timeline position relative to the start of the most recently added animation (e.g. `&lt;0.5`, `&lt;-1`)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.17.0] 2025-06-08
+
+### Added
+
+-   Support for defining a timeline position relative to the start of the most recently added animation (e.g. `<0.5`, `<-1`)
+
 ## [12.17.3] 2025-06-12
 
 ### Changed
diff --git a/packages/framer-motion/src/animation/sequence/utils/__tests__/calc-time.test.ts b/packages/framer-motion/src/animation/sequence/utils/__tests__/calc-time.test.ts
@@ -20,5 +20,12 @@ describe("calcNextTime", () => {
 
         // Previous
         expect(calcNextTime(5, "<", 100, labels)).toBe(100)
+
+        // Relative to previous
+        expect(calcNextTime(5, "<1", 100, labels)).toBe(101)
+        expect(calcNextTime(5, "<-1", 100, labels)).toBe(99)
+        expect(calcNextTime(5, "<2.5", 100, labels)).toBe(102.5)
+        expect(calcNextTime(5, "<-2.5", 100, labels)).toBe(97.5)
+        expect(calcNextTime(5, "<-150", 100, labels)).toBe(0)
     })
 })
diff --git a/packages/framer-motion/src/animation/sequence/utils/calc-time.ts b/packages/framer-motion/src/animation/sequence/utils/calc-time.ts
@@ -16,6 +16,8 @@ export function calcNextTime(
         return Math.max(0, current + parseFloat(next))
     } else if (next === "<") {
         return prev
+    } else if (next.startsWith("<")) {
+        return Math.max(0, prev + parseFloat(next.slice(1)))
     } else {
         return labels.get(next) ?? current
     }

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@ export function calcNextTime(`
`16`	`16`	`return Math.max(0, current + parseFloat(next))`
`17`	`17`	`} else if (next === "<") {`
`18`	`18`	`return prev`
	`19`	`+ } else if (next.startsWith("<")) {`
	`20`	`+ return Math.max(0, prev + parseFloat(next.slice(1)))`
`19`	`21`	`} else {`
`20`	`22`	`return labels.get(next) ?? current`
`21`	`23`	`}`