[BUG] Exiting elements are removed early or not removed at all when triggering multiple exit animations with AnimatePresence

[samselikoff]

1. Read the FAQs 👇

2. Describe the bug

Exiting elements are being removed from the DOM early or orphaned and remain in the DOM when multiple exit animations are triggered with AnimatePresence.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-animatepresence-multiple-exiting-elements-bug-2vpv62

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the sandbox
2. Click the + button 4-5 times
3. Notice how some of the exiting children finish their animation and are removed correctly, but some are removed early (seemingly when the first exiting element finishes its animation), and some are never removed from the DOM.

5. Expected behavior

All exiting elements complete their animation and are then removed from the DOM.

6. Video or screenshots

Screen.Recording.2022-06-03.at.3.29.24.PM.mov

FAQs

I did see the note about stable keys, and these are changing, but the docs do mention this technique of using key={currentIndex} in the Image Carousel example to achieve the entering/exiting behavior.

Also I don't see this bug on v5.0. The CodeSandbox is on v6.3.10.

[samselikoff]

Looks like there's other issues / a fix for this: #1569

[mattgperry]

This has been fixed since