Search code examples
reactjsexitframer-motionunmount

Animate Presence exit not working framer motion

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>
Solution

  • 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