Animate Presence exit not working framer motion

Question

Animate presence exit prop is not working

what i am doing wrong?

<AnimatePresence>
      <motion.div
        initial={{ opacity: 0, x: "-100%" }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: "100%" }}>
        <h1>Head</h1>
      </motion.div>
</AnimatePresence>

Fixed!!

Fixed it by adding these two props to Switch:

import {useLocation} from "react-router-dom";

const location = useLocation();

<Switch location={location} key={location.pathname}>
//Routes
</Switch>

Answer 1

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

Doc reference: https://www.framer.com/api/motion/animate-presence/#unmount-animations

In your case that is the <motion.div>

I have some examples of AnimatePresense here

• With Multiple Items: https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2
• With React Router: https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg