[BUG] Layout animation breaks in flex centered container and percentage X values

[leineveber]

1. Read the FAQs 👇

2. Describe the bug

Simple example, there is a list of items which is centered. New added item comes with animation from right while other items go to their new positions.
Using {x: } for new added item works perfectly fine while {x: 100%} (any percentage) breaks animations

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/wmc4pv

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the example in CodeSandbox
2. There are 2 lists: first one is working one and second one has the bug
3. Click on "add item" 2 times for first one
4. Click on "add item" 2 times for second one

5. Expected behavior

Previously added and animated item should not teleport instantly to the new position

6. Video or screenshots

Screen.Recording.2025-11-03.at.19.23.36.mov

7. Environment details

n/a

[Yeom-JinHo]

It’s probably not a logic issue — my guess is that it happens because Framer Motion’s layout animations seem to work entirely in pixels, while CSS percentage transforms are resolved relative to the element or its parent.

So when those two systems mix, Motion’s pixel-based layout projection and the browser’s percentage-based transform might be using different coordinate systems.

That mismatch could cause the element’s position to get recalculated mid-frame, which is likely why the animation appears to jump.

[leineveber]

It’s probably not a logic issue — my guess is that it happens because Framer Motion’s layout animations seem to work entirely in pixels, while CSS percentage transforms are resolved relative to the element or its parent.

So when those two systems mix, Motion’s pixel-based layout projection and the browser’s percentage-based transform might be using different coordinate systems.

That mismatch could cause the element’s position to get recalculated mid-frame, which is likely why the animation appears to jump.

but positions for default items (items that are rendered on first mount) are calculated correctly, position for first new item is correct, why cant added item act as default item after layout animation is completed?

[Yeom-JinHo]

@leineveber
I think the layout prop should only be applied to components that actually perform animation.
Like this:

<motion.div
  key={i}
  transition={{ duration: 0.4 }}
  layout={shouldAnimate}
  initial={shouldAnimate ? { x: X_BY_TYPE[type] } : undefined}
  animate={shouldAnimate ? { x: 0 } : undefined}
  style={{
    background: "pink",
    borderRadius: 30,
    padding: 15,
  }}
>
  {item.name}
</motion.div>

[leineveber]

@Yeom-JinHo
that way default items don't have animation =(
hope someone from motion team can answer these questions