Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AnimatePresence - exit not happening

See original GitHub issue

Describe the bug exit animation not happening with AnimatePresence.

To Reproduce

The following is my code (redacted):

{list.map(item => (
  <AnimatePresence>
    <motion.div
      initial={{opacity: 0}}
      animate={{opacity: 1}}
      exit={{opacity: 0}}
    >
      <MyComponent
        key={item.id}
        item={item}
      />
    </motion.div>
  </AnimatePresence>
))}

This is pretty much exactly like the example found here: https://www.framer.com/api/motion/examples/#exit-animations

Expected behavior

I expect MyComponent to fade out when it’s item is removed from list. It does not. It just disappears.

Desktop (please complete the following information):

OS: OSX 10.13.6
Browser Chrome
Version 76.0.3809.100

Issue Analytics

State:
Created 4 years ago
Comments:8

Top GitHub Comments

11reactions

hoagy-davis-diggescommented, Jul 8, 2020

Would you be able to elaborate on that point? I’m not clear why the motion.div elements are not being removed from the tree when the route which is visible changes

6reactions

mattgperrycommented, Aug 22, 2019

AnimatePresence should wrap the list otherwise it gets unmounted along with the item.

Top Results From Across the Web

Animate Presence exit not working framer motion

The reason that this is not working is that you have to explicitly specify the key of the child that you are conditionally...

AnimatePresence exit not working for me... · Issue #493 - GitHub

Dunno if this is a bug or if i'm doing something wrong, but the exit prop does not seem to be working for...

Framer Motion exit animation is not working : r/reactjs - Reddit

Hello, I am trying to use framer-motion and want to animate an exit, this is how I am defining the motion div: {isOpen(point)...

AnimatePresence | Framer for Developers

Exit animations. AnimatePresence works by detecting when direct children are removed from the React tree. Any motion components contained by the removed child ......

Exit animation with `framer-motion` demystified

The final step is to re-render the AnimatePresence component when all the exit animation are finished to render the right React elements. After ......