[pull] main from motiondivision:main

CHANGELOG.md

@@ -4,7 +4,13 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
-## [12.26.0] 2026-01-11
+## [12.26.1] 2026-01-12
+
+### Fixed
+
+-   Improve overload selection for `useTransform`.
+
+## [12.26.0] 2026-01-12
 
 ### Added
 

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "12.26.0",
+    "version": "12.26.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -10,8 +10,8 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.26.0",
-        "motion": "^12.26.0",
+        "framer-motion": "^12.26.1",
+        "motion": "^12.26.1",
         "motion-dom": "^12.24.11",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

dev/next/package.json

@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.26.0",
+    "version": "12.26.1",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.26.0",
+        "motion": "^12.26.1",
         "next": "15.4.10",
         "react": "19.0.0",
         "react-dom": "19.0.0"

dev/react-19/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-19-env",
     "private": true,
-    "version": "12.26.0",
+    "version": "12.26.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.26.0",
+        "motion": "^12.26.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "12.26.0",
+    "version": "12.26.1",
     "type": "module",
     "scripts": {
         "dev": "yarn vite",
@@ -11,7 +11,7 @@
         "preview": "yarn vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.26.0",
+        "framer-motion": "^12.26.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.26.0",
+  "version": "12.26.1",
   "packages": [
     "packages/*",
     "dev/*"

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.26.0",
+    "version": "12.26.1",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",

packages/framer-motion/src/value/__tests__/use-transform.test.tsx

@@ -455,4 +455,33 @@ describe("as output map", () => {
 
         render(<Component />)
     })
+
+    test("works with mixed types (string and number outputs)", async () => {
+        const progress = motionValue(50)
+
+        const Component = () => {
+            const { filter, scale, opacity } = useTransform(
+                progress,
+                [0, 100],
+                {
+                    filter: ["blur(10px)", "blur(0px)"],
+                    scale: [0.5, 1],
+                    opacity: [0.5, 1],
+                }
+            )
+            return <motion.div style={{ filter, scale, opacity }} />
+        }
+
+        const { container } = render(<Component />)
+        expect(container.firstChild).toHaveStyle("filter: blur(5px)")
+        expect(container.firstChild).toHaveStyle("opacity: 0.75")
+        expect(container.firstChild).toHaveStyle("transform: scale(0.75)")
+
+        progress.set(0)
+
+        await nextFrame()
+        expect(container.firstChild).toHaveStyle("filter: blur(10px)")
+        expect(container.firstChild).toHaveStyle("opacity: 0.5")
+        expect(container.firstChild).toHaveStyle("transform: scale(0.5)")
+    })
 })

packages/framer-motion/src/value/use-transform.ts

@@ -26,6 +26,44 @@ interface OutputMap<O> {
     [key: string]: O[]
 }
 
+/**
+ * Create multiple `MotionValue`s that transform the output of another `MotionValue` by mapping it from one range of values into multiple output ranges.
+ *
+ * @remarks
+ *
+ * This is useful when you want to derive multiple values from a single input value.
+ * The keys of the output map must remain constant across renders.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const x = useMotionValue(0)
+ *   const { opacity, scale } = useTransform(x, [0, 100], {
+ *     opacity: [0, 1],
+ *     scale: [0.5, 1]
+ *   })
+ *
+ *   return (
+ *     <motion.div style={{ opacity, scale, x }} />
+ *   )
+ * }
+ * ```
+ *
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputMap - An object where keys map to output ranges. Each output range must be the same length as `inputRange`.
+ * @param options - Transform options applied to all outputs
+ *
+ * @returns An object with the same keys as `outputMap`, where each value is a `MotionValue`
+ *
+ * @public
+ */
+export function useTransform<T extends Record<string, any[]>>(
+    inputValue: MotionValue<number>,
+    inputRange: InputRange,
+    outputMap: T,
+    options?: TransformOptions<T[keyof T][number]>
+): { [K in keyof T]: MotionValue<T[K][number]> }
+
 /**
  * Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.
  *
@@ -131,44 +169,6 @@ export function useTransform<I, O>(
 ): MotionValue<O>
 export function useTransform<I, O>(transformer: () => O): MotionValue<O>
 
-/**
- * Create multiple `MotionValue`s that transform the output of another `MotionValue` by mapping it from one range of values into multiple output ranges.
- *
- * @remarks
- *
- * This is useful when you want to derive multiple values from a single input value.
- * The keys of the output map must remain constant across renders.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const x = useMotionValue(0)
- *   const { opacity, scale } = useTransform(x, [0, 100], {
- *     opacity: [0, 1],
- *     scale: [0.5, 1]
- *   })
- *
- *   return (
- *     <motion.div style={{ opacity, scale, x }} />
- *   )
- * }
- * ```
- *
- * @param inputValue - `MotionValue`
- * @param inputRange - A linear series of numbers (either all increasing or decreasing)
- * @param outputMap - An object where keys map to output ranges. Each output range must be the same length as `inputRange`.
- * @param options - Transform options applied to all outputs
- *
- * @returns An object with the same keys as `outputMap`, where each value is a `MotionValue`
- *
- * @public
- */
-export function useTransform<K extends string, O>(
-    inputValue: MotionValue<number>,
-    inputRange: InputRange,
-    outputMap: { [key in K]: O[] },
-    options?: TransformOptions<O>
-): { [key in K]: MotionValue<O> }
-
 export function useTransform<I, O, K extends string>(
     input:
         | MotionValue<I>

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "motion",
-    "version": "12.26.0",
+    "version": "12.26.1",
     "description": "An animation library for JavaScript and React.",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -76,7 +76,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^12.26.0",
+        "framer-motion": "^12.26.1",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {

yarn.lock

@@ -7420,7 +7420,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@^12.26.0, framer-motion@workspace:packages/framer-motion":
+"framer-motion@^12.26.1, framer-motion@workspace:packages/framer-motion":
   version: 0.0.0-use.local
   resolution: "framer-motion@workspace:packages/framer-motion"
   dependencies:
@@ -8192,8 +8192,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "html-env@workspace:dev/html"
   dependencies:
-    framer-motion: ^12.26.0
-    motion: ^12.26.0
+    framer-motion: ^12.26.1
+    motion: ^12.26.1
     motion-dom: ^12.24.11
     react: ^18.3.1
     react-dom: ^18.3.1
@@ -11013,11 +11013,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"motion@^12.26.0, motion@workspace:packages/motion":
+"motion@^12.26.1, motion@workspace:packages/motion":
   version: 0.0.0-use.local
   resolution: "motion@workspace:packages/motion"
   dependencies:
-    framer-motion: ^12.26.0
+    framer-motion: ^12.26.1
     tslib: ^2.4.0
   peerDependencies:
     "@emotion/is-prop-valid": "*"
@@ -11134,7 +11134,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "next-env@workspace:dev/next"
   dependencies:
-    motion: ^12.26.0
+    motion: ^12.26.1
     next: 15.4.10
     react: 19.0.0
     react-dom: 19.0.0
@@ -12599,7 +12599,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.2.0
     "@vitejs/plugin-react-swc": ^3.5.0
     eslint-plugin-react-refresh: ^0.4.6
-    motion: ^12.26.0
+    motion: ^12.26.1
     react: ^19.0.0
     react-dom: ^19.0.0
     vite: ^5.2.0
@@ -12683,7 +12683,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.2.0
     "@vitejs/plugin-react-swc": ^3.5.0
     eslint-plugin-react-refresh: ^0.4.6
-    framer-motion: ^12.26.0
+    framer-motion: ^12.26.1
     react: ^18.3.1
     react-dom: ^18.3.1
     vite: ^5.2.0