[FEATURE] A way to control transition when using layoutId

[tounsoo]

Is your feature request related to a problem? Please describe. I'm frustrated that the indicators are animating vertically when other elements are resizing when using layoutId. I have a tab with indicator similar to the example in the doc.

Describe the solution you'd like A way to limit x or y animation when using layoutId

Describe alternatives you've considered

• Tried adding layout to the wrapper which isn't ideal since that will animate the entire component vertically.
• Changed parent div to motion.div with layout and transition={{ duration: 0 }}, this worked

Additional context You can replicate what I'm frustrated with by adding a div on top of the Tab in the example and changing its height on click without animation.

Div will change its height instantly while the indicator will float outside of the Tab and animate to its position

[benface]

HUGE +1 to this. I am surprised there is no way to control / override the individual properties that get animated during layout transitions.

Here's a CodeSandbox that shows the issue: https://codesandbox.io/p/sandbox/sn25nh (Click on "Expand" to see how the tab highlight unexpectedly moves vertically.)

[benface]

Oh, this seems like a duplicate of #1972.