# Why is my AnimatePresence exit animation not working?

> Exit animations only run when AnimatePresence stays mounted and its direct child is removed. The usual causes are: the condition is outside AnimatePresence, the child has no unique key, the exit prop is on a nested element, or a parent unmounts too. For route transitions, key the routes by location and use mode="wait".

Updated November 2026. Source: https://www.exodeui.com/questions/animatepresence-exit-animation-not-working/

## Key takeaways

- AnimatePresence must stay mounted; put the condition inside it
- The direct child needs the exit prop and a unique key
- Use mode="wait" to finish the exit before the next enter
- For React Router, key the routes with location.pathname
- State that changes very fast is a known edge case; update Motion

## Frequently asked questions

### Why does my exit animation flash and disappear?

The element was removed by a parent that unmounted at the same time. Keep AnimatePresence above the condition.

### What does mode="wait" do?

It waits for the exiting child to finish before the entering child animates in.

### How do I run code after an exit finishes?

Pass onExitComplete to AnimatePresence.

### Can I animate a list item being removed?

Yes. Wrap the mapped list in AnimatePresence and give each item a stable key, not its index.

## Related

- [Modal animation guide](https://www.exodeui.com/learn/modal-animation)
- [View Transitions API](https://www.exodeui.com/learn/view-transitions-api)
- [Animate on scroll with Motion](https://www.exodeui.com/questions/framer-motion-animate-on-scroll-into-view)
- [Best page transition libraries](https://www.exodeui.com/best-page-transition-libraries)