Require originX/originY motion values for scaled layout parents

Remove resolveComputedOrigin getComputedStyle approach. Layout animations
in scaled parents work correctly when originX/originY are set as motion
values (not CSS transformOrigin). Update test to use originX: 0, originY: 0.

Fixes #3356

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mattgperry

dev/react/src/tests/layout-scaled-parent.tsx

@@ -8,8 +8,10 @@ import { useState } from "react"
  * A child motion.div with layout toggles its CSS top position.
  * The layout animation should smoothly interpolate between the two visual positions.
  *
- * With the bug, the snapshot measurement in removeTransform uses the wrong
- * transform-origin when removing the parent's scale, causing incorrect deltas.
+ * With the bug, the projection system doesn't account for the parent's scale
+ * when computing layout animation deltas, causing misaligned animations.
+ * Using originX/originY as motion values (not CSS transformOrigin) ensures
+ * removeTransform uses the correct origin.
  */
 export const App = () => {
     const [toggled, setToggled] = useState(false)
@@ -20,7 +22,8 @@ export const App = () => {
                 layoutRoot
                 style={{
                     scale: 2,
-                    transformOrigin: "0 0",
+                    originX: 0,
+                    originY: 0,
                     position: "absolute",
                     top: 0,
                     left: 0,

packages/motion-dom/src/projection/node/create-projection-node.ts

@@ -86,35 +86,6 @@ const animationTarget = 1000
 
 let id = 0
 
-/**
- * When an element has scale in latestValues but no originX/originY motion
- * values, read the actual transform-origin from the computed style so
- * removeBoxTransforms uses the correct origin instead of defaulting to 0.5.
- */
-function resolveComputedOrigin(
-    latestValues: ResolvedValues,
-    instance: unknown
-): ResolvedValues {
-    if (
-        !hasScale(latestValues) ||
-        latestValues.originX !== undefined ||
-        latestValues.originY !== undefined ||
-        !instance
-    ) {
-        return latestValues
-    }
-    const computed = window.getComputedStyle(instance as Element)
-    const originStr = computed.transformOrigin
-    if (!originStr) return latestValues
-    const parts = originStr.split(" ")
-    const el = instance as unknown as HTMLElement
-    return {
-        ...latestValues,
-        originX: parseFloat(parts[0]) / (el.offsetWidth || 1),
-        originY: parseFloat(parts[1]) / (el.offsetHeight || 1),
-    }
-}
-
 function resetDistortingTransform(
     key: string,
     visualElement: VisualElement,
@@ -1133,23 +1104,14 @@ export function createProjectionNode<I>({
 
                 removeBoxTransforms(
                     boxWithoutTransform,
-                    resolveComputedOrigin(
-                        node.latestValues,
-                        node.instance
-                    ),
+                    node.latestValues,
                     node.snapshot?.layoutBox,
                     sourceBox
                 )
             }
 
             if (hasTransform(this.latestValues)) {
-                removeBoxTransforms(
-                    boxWithoutTransform,
-                    resolveComputedOrigin(
-                        this.latestValues,
-                        this.instance
-                    )
-                )
+                removeBoxTransforms(boxWithoutTransform, this.latestValues)
             }
 
             return boxWithoutTransform