[BUG] Layout animations misaligned in scaled parent containers

[haozhuqian]

1. Read the FAQs

I have read the FAQs and this issue is not covered by them.

2. Describe the bug

When a parent element has a transform: scale() applied, child elements using layout animations calculate incorrect initial positions after position property changes (e.g., from absolute to relative or vice versa), causing chaotic animation behavior.
The layout animation system appears to use the scaled coordinates as if they were unscaled coordinates, resulting in elements starting their animations from wrong positions.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the CodeSandbox reproduction
2. Observe three test containers with different scale values (2, 1, 0.5)
3. Click the "Stacked/unStacked" toggle button to change position from absolute to relative and back
4. Watch how elements in scaled containers start their layout animations from incorrect initial positions
5. Compare with the normal container (scale: 1) which animates correctly

5. Expected behavior
Prerequisite: When the scaled parent element has layoutRoot applied:

• Layout animations should calculate correct initial positions regardless of parent scale transforms
• Elements should animate smoothly from their actual current visual position to their target position
• The animation behavior should be identical across all scale values
• The layoutRoot should isolate the layout calculation context and prevent scale interference

6. Video or screenshots

20250827165616_rec_.mp4

7. Environment details

• framer-motion version: motion@12.6.5
• React version: 19.0.0
• Browser: Chrome 139.0.7258.128

[marcandrews]

I am experiencing this too, but I am on motion@12.12.1 and react@18.3.1.

I am a bit confused because my first implementation used motion@11.11.17 and I do not recall experiencing this issue, but I upgraded motion@12.12.1 in May 2025 and I am just encountering this issue now.

Is this a regression from version 11 to 12?

[haozhuqian]

@marcandrews Thanks for the additional information! However, I'm also experiencing this issue with motion@11.0.0 and react@18.3.0 in another project, so it might not be a regression from v11 to v12.

It's possible that you didn't encounter this issue before because the triggering conditions were different in your previous implementation. This bug might have existed in v11 as well, but only manifests under specific circumstances.

Could you share more details about what changed in your implementation when you upgraded? It might help us identify the specific conditions that trigger this issue.

[marcandrews]

Sorry I was mistaken and you are right that both v11 and v12 are affected.

I did some more debugging and I was able to correct the initial position the issue using transformTemplate:

transformTemplate={(latest, generated) => {
  const [, x, y, z] =
    /translate3d\((.+)px,\s?(.+)px,\s?(.+)px\)/.exec(generated) ??
    [];

  if (x && y && z) {
    // account for the scale when translating ...
    return `translate3d(${Number(x) / scale}px, ${
      Number(y) / scale
    }px, ${Number(z) / scale})`;
  }

  return `${generated}`;
}}

I'll agree it's not a great solution, and I think it works if you are using motion for layout animations only, but it might help until we can get a proper fix.

Codesandbox

[marcandrews]

I did some more debugging and I think the problem might be in setAnimationOrigin() where it may not be accounting for scale should it be applied.

Any thoughts @mattgperry? Do you think it's a relatively easy fix for me to make in a PR?

[812207441]

大佬，还没有解决吗，这个问题