Framer-motion exit animation not firing

Question

https://codesandbox.io/s/framer-motion-not-working-id46n?file=/src/Notifications.tsx

---

As you can see in this gif, the notifications don't do the exit animation upon being removed from the DOM. (which they get respectively 6 seconds after they spawned). Why?

I have done everything that was mentioned in other answers, such as:

1. Adding a Unique key to each notification child
2. <Routes location={location} key={location.pathname}>
3. etc.

Why does it not work?

Goal: Get the notifications to play some exit animation upon being removed (i.e. after the specified notification duration)

Answer 1

The exiting elements need to be direct children of the <AnimatePresence> tag.

Your sandbox doesn't run here, so I can't verify the solution, but it should work if you change your structure from this:

<AnimatePresence>
  <NotificationContext>
    <div id="notificationCenter">
      <motion.div key={notification.id} />
    </div>
  </NotificationContext>
</AnimatePresence>

to this:

<NotificationContext>
  <div id="notificationCenter">
    <AnimatePresence>
      <motion.div key={notification.id} />
    </AnimatePresence>
  </div>
<NotificationContext>