Skip to content

[BUG] Layout animations misaligned in scaled parent containers #3356

@haozhuqian

Description

@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: [email protected]
  • React version: 19.0.0
  • Browser: Chrome 139.0.7258.128

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions