search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.57k stars 749 forks source link

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

Closed airfortech closed 1 month ago

airfortech commented 1 month ago

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) opera_i9xgFi1MNC

How it works now: opera_7bP04n3Ils

6. Environment details

Windows 10, Opera, Edge. Same bug.

mattgperry commented 1 month ago

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 commented 1 month ago

yea, with LayoutGroup wrapper it works.