[BUG] layout - parent height does not animate when child is removed

[airfortech]

1. Describe the bug

Parent height does not animate when child is removed. After change AnimatePresence mode to popLayout, parent height animates but child exit not. None of modes is working as expected.

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-layout-k367fk?file=%2Fsrc%2FApp.js

3. Steps to reproduce

Steps to reproduce the behavior:

1. Click Add Items. ul Height is animating properly.
2. Click some Item. Its exit animation works. After end ul height changes immediately. Should animates.

4. Workaround fix

After downgraded framer-motion to 4.0.0 and wrapped <motion.ul> with <AnimateSharedLayout> it works as expected.

5. Video

How it should work: (fm 4.0)

How it works now:

6. Environment details

Windows 10, Opera, Edge. Same bug.

[mattgperry]

Ah yeah you need to wrap the list with LayoutGroup https://www.framer.com/motion/layout-group/

As layout animations are only triggered on render, and the AnimatePresence render to finally remove the element is private to itself.

[airfortech]

yea, with LayoutGroup wrapper it works.

[OahMada]

What if a grandchild is causing the height change? LayoutGroup doesn't seem to work in this case.