[pull] main from motiondivision:main

.circleci/config.yml

@@ -194,4 +194,5 @@ workflows:
         jobs:
             - test
             - test-react
+            - test-react-19
             - test-html

CHANGELOG.md

@@ -4,7 +4,20 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
-## [12.28.2] 2026-01-21
+## [12.29.0] 2026-01-22
+
+### Added
+
+-   `transformViewBoxPoint`: Scale drag gestures within `<svg>` elements where `viewBox` and rendered `width`/`height` are mismatched.
+-   `trackContentSize`: New `scroll` and `useScroll` option for tracking changes to content size.
+
+### Fixed
+
+-   Add React 19 test suite to CI.
+-   Fix types with `motion.create()`.
+-   Shared element animations now respect `layoutDependency`.
+
+## [12.28.2] 2026-01-22
 
 ### Added
 

dev/html/package.json

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

dev/next/package.json

@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.28.2",
+    "version": "12.29.0",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.28.2",
+        "motion": "^12.29.0",
         "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.28.2",
+    "version": "12.29.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.28.2",
+        "motion": "^12.29.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

dev/react-19/vite.config.ts

@@ -1,3 +1,4 @@
+import path from "path"
 import react from "@vitejs/plugin-react-swc"
 import { defineConfig } from "vite"
 
@@ -8,4 +9,15 @@ export default defineConfig({
         hmr: false,
     },
     plugins: [react()],
+    resolve: {
+        dedupe: ["react", "react-dom"],
+        alias: {
+            react: path.resolve(__dirname, "node_modules/react"),
+            "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+        },
+    },
+    optimizeDeps: {
+        include: ["react", "react-dom", "@radix-ui/react-dialog"],
+        force: true,
+    },
 })

dev/react/package.json

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

dev/react/src/examples/Drag-svg-viewbox.tsx

@@ -0,0 +1,46 @@
+import { useRef } from "react"
+import { motion, MotionConfig, transformViewBoxPoint } from "framer-motion"
+
+/**
+ * Example demonstrating SVG drag with mismatched viewBox and dimensions.
+ *
+ * This example shows how to use `transformViewBoxPoint` to correctly
+ * handle drag within an SVG where the viewBox coordinates differ from
+ * the rendered pixel dimensions.
+ *
+ * Without transformViewBoxPoint, dragging would move the element 5x
+ * faster than expected because the viewBox is 100x100 but rendered at 500x500.
+ */
+export const App = () => {
+    const svgRef = useRef<SVGSVGElement>(null)
+
+    return (
+        <MotionConfig transformPagePoint={transformViewBoxPoint(svgRef)}>
+            <svg
+                ref={svgRef}
+                viewBox="0 0 100 100"
+                style={{
+                    width: 500,
+                    height: 500,
+                    border: "2px solid white",
+                    borderRadius: 20,
+                }}
+            >
+                <motion.circle
+                    cx={50}
+                    cy={50}
+                    r={10}
+                    fill="white"
+                    drag
+                    dragConstraints={{
+                        left: -40,
+                        right: 40,
+                        top: -40,
+                        bottom: 40,
+                    }}
+                    dragElastic={0.1}
+                />
+            </svg>
+        </MotionConfig>
+    )
+}

dev/react/src/tests/animate-style-pause.tsx

@@ -10,14 +10,17 @@ export const App = () => {
         const animation = animateMini(
             ref.current,
             { width: 200 },
-            { duration: 0.2 }
+            { duration: 1 } // Longer duration for CI timing reliability
         )
 
-        setTimeout(() => {
+        const timeoutId = setTimeout(() => {
             animation.pause()
         }, 100)
 
-        return () => animation.cancel()
+        return () => {
+            clearTimeout(timeoutId)
+            animation.cancel()
+        }
     }, [])
 
     return <div id="box" ref={ref} style={style} />

dev/react/src/tests/drag-svg-viewbox.tsx

@@ -0,0 +1,49 @@
+import { useRef } from "react"
+import { motion, MotionConfig, transformViewBoxPoint } from "framer-motion"
+
+/**
+ * Test for SVG drag with mismatched viewBox and dimensions.
+ *
+ * When an SVG has viewBox="0 0 100 100" but width/height="500",
+ * dragging should correctly transform pointer coordinates.
+ *
+ * A mouse movement of 100 pixels in screen space should translate to
+ * 20 units in SVG coordinate space (100 * 100/500 = 20).
+ */
+export const App = () => {
+    const params = new URLSearchParams(window.location.search)
+    const svgRef = useRef<SVGSVGElement>(null)
+
+    // Default: viewBox is 100x100 but rendered size is 500x500
+    // This creates a 5x scale factor
+    const viewBoxX = parseFloat(params.get("viewBoxX") || "0")
+    const viewBoxY = parseFloat(params.get("viewBoxY") || "0")
+    const viewBoxWidth = parseFloat(params.get("viewBoxWidth") || "100")
+    const viewBoxHeight = parseFloat(params.get("viewBoxHeight") || "100")
+    const svgWidth = parseFloat(params.get("svgWidth") || "500")
+    const svgHeight = parseFloat(params.get("svgHeight") || "500")
+
+    return (
+        <MotionConfig transformPagePoint={transformViewBoxPoint(svgRef)}>
+            <svg
+                ref={svgRef}
+                viewBox={`${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`}
+                width={svgWidth}
+                height={svgHeight}
+                style={{ border: "1px solid black" }}
+            >
+                <motion.rect
+                    data-testid="draggable"
+                    x={10}
+                    y={10}
+                    width={20}
+                    height={20}
+                    fill="red"
+                    drag
+                    dragElastic={0}
+                    dragMomentum={false}
+                />
+            </svg>
+        </MotionConfig>
+    )
+}

dev/react/src/tests/layout-shared-dependency.tsx

@@ -0,0 +1,110 @@
+import { motion, useMotionValue } from "framer-motion"
+import { useState } from "react"
+
+/**
+ * Test for issue #1436: layoutDependency not working with layoutId
+ *
+ * This test verifies that when a component with layoutId unmounts and remounts
+ * in a different location (e.g., switching sections), it should NOT animate
+ * if layoutDependency hasn't changed.
+ *
+ * Expected behavior:
+ * - When clicking "Switch Section": NO animation (same layoutDependency)
+ * - When clicking "Jump here": animation should occur (layoutDependency changes)
+ */
+
+function Items() {
+    const [selected, setSelected] = useState(0)
+    const backgroundColor = useMotionValue("#f00")
+console.log('render')
+    return (
+        <>
+            <article style={{ marginBottom: 20 }}>
+                <button id="jump-0" onClick={() => setSelected(0)}>
+                    Jump here
+                </button>
+                {selected === 0 && (
+                    <motion.div
+                        id="box"
+                        layoutId="box"
+                        layoutDependency={selected}
+                        style={{
+                            width: 100,
+                            height: 100,
+                            backgroundColor,
+                            borderRadius: 10,
+                        }}
+                        transition={{ duration: 0.5, ease: () => 0.5 }}
+                        onLayoutAnimationStart={() => backgroundColor.set("#0f0")}
+                        onLayoutAnimationComplete={() => backgroundColor.set("#00f")}
+                    />
+                )}
+            </article>
+            <article>
+                <button id="jump-1" onClick={() => setSelected(1)}>
+                    Jump here
+                </button>
+                {selected === 1 && (
+                    <motion.div
+                        id="box"
+                        layoutId="box"
+                        layoutDependency={selected}
+                        style={{
+                            width: 100,
+                            height: 100,
+                            backgroundColor,
+                            borderRadius: 10,
+                        }}
+                        transition={{ duration: 0.5, ease: () => 0.5 }}
+                        onLayoutAnimationStart={() => backgroundColor.set("#0f0")}
+                        onLayoutAnimationComplete={() => backgroundColor.set("#00f")}
+                    />
+                )}
+            </article>
+        </>
+    )
+}
+
+function SectionA() {
+    return (
+        <div id="section-a">
+            <p>Section A Header</p>
+            <Items />
+        </div>
+    )
+}
+
+function SectionB() {
+    return (
+        <div id="section-b">
+            <Items />
+        </div>
+    )
+}
+
+export const App = () => {
+    const [section, setSection] = useState<"a" | "b">("a")
+
+    return (
+        <div style={{ position: "relative" }}>
+            <div style={{ marginBottom: 20 }}>
+                <button
+                    id="section-a-btn"
+                    onClick={() => setSection("a")}
+                >
+                    Section A
+                </button>
+                <button
+                    id="section-b-btn"
+                    onClick={() => setSection("b")}
+                    style={{ marginLeft: 10 }}
+                >
+                    Section B
+                </button>
+            </div>
+
+            {section === "a" && <SectionA />}
+            {section === "b" && <SectionB />}
+        </div>
+    )
+}