CODEWITHSUNDEEP
reactjstypescriptframer-motion
Bjango
Bjango

Reputation: 393

Framer-motion exit animation not firing

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)

Upvotes: 3

Views: 6273

Answers (1)

Cadin
Cadin

Reputation: 4649

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>

Upvotes: 7

Related Questions