search

framer / motion

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

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

Closed airfortech closed 5 months ago

airfortech commented 5 months 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 5 months 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 5 months ago

yea, with LayoutGroup wrapper it works.