LayoutId shared element transitions across nested trees – missing constraint

Direct answer

Framer Motion's layoutId prop treats any two elements sharing the same string value as a single shared element for animation purposes. During the initial render pass, the library measures the bounding rectangle of each matched element and stores it as the source or destination rectangle, depending on whether the element is entering or exiting. When both renders occur within the same layout root, typically provided by an or a parent element with layout, the measured rectangles are relative to that root, and the animation interpolates between them smoothly.

Likely explanation versus confirmed facts

• Confirmed: Framer Motion always matches elements by identical layoutId, records their bounding boxes during layout, and animates the transition using the measured source and destination rectangles.
• Likely explanation: When the element's parent hierarchy shifts without a stable layout root, the measured rectangle references a different coordinate space, causing the animation to appear jumpy or misplaced.

Practical steps for this case

1. Keep the shared element's layoutId consistent across every render; avoid dynamic ID generation.
2. Wrap the transition tree with a single layout root, such as ..., so all measured elements share the same coordinate space.
3. Avoid moving the animated component between unrelated parent components; if relocation is necessary, ensure the new parent is part of the same layout root.
4. Use stable React keys on the animated element to prevent unmount/re-mount during the transition, which would reset layout measurements.
5. When animating many elements, batch the transitions, use staggerChildren, and apply layoutId only to elements that actually need animation, reducing main-thread layout passes.

Does the animated element's parent layout root change during the transition, or does its React key shift between renders? Confirming this will determine whether anchoring a common layout root or stabilizing the key is the primary fix.