[BUG] Layout animations: bouncing occurs when duration is set, and the child size changes

[oosawy]

1. Read the FAQs 👇

2. Describe the bug

Just adding transition={{ duration: 1 }} to the scale correction example (using motion@latest) in layout animations causes strange bouncing.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/jsq3ft?file=%2Fsrc%2FApp.js%3A16%2C35

4. Steps to reproduce

Steps to reproduce the behavior:

1. Click on the box
2. See the circle bouncing

5. Expected behavior

The circle does morphing and dosen't move unpredictably.

6. Video or screenshots

20250126-2056-52.8655039.mp4

7. Environment details

Chrome 131, Windows 11

[mattgperry]

Can you make this sandbox public?

[oosawy]

@mattgperry
I don't think it's private by default, it should be fine now.

[mattgperry]

I'll have a think about what to do about this. Obviously it's not what you'd want in this instance - however what's technically happening is the child animating relative to its parent. This fixes a lot more bugs than it creates. Because the child is animating faster than the parent and that the child ends at the same place it starts it looks odd here.