Framer Motion exit and AnimatePresence not working in Nextjs?

Question

My exit prop or AnimatePresence is not working.

My variant:

const imgVariant = {
    initial: {
      opacity: 0,
      y: -100,
    },
    animate: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 20,
      },
    },
    exit: {
      opacity: 0,
      y: 500,
      transition: {
        duration: 5,
      },
    },
  };

My code:

<div className="h-screen bg-neutral-200 flex overflow-hidden">

        <AnimatePresence exitBeforeEnter>

          <div className="w-full grid place-items-center">
            <motion.img
              src={product.image}
              alt={product.name}
              className="h-[400px] object-cover z-10 cursor-pointer"
              variants={imgVariant}
              initial="initial"
              animate="animate"
              exit="exit"
              drag
              dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
            />
          </div>
       </AnimatePresence>
</div>

initial and animate is working normally, but exit animation wont trigger when I change route, am I doing something wrong here?

Answer 1

The element you're trying to animate needs to have a unique key prop.

<div className="h-screen bg-neutral-200 flex overflow-hidden">
    <AnimatePresence exitBeforeEnter>
        <div className="w-full grid place-items-center">

            <motion.img
              key={product.id}
              src={product.image}
              alt={product.name}
              className="h-[400px] object-cover z-10 cursor-pointer"
              variants={imgVariant}
              initial="initial"
              animate="animate"
              exit="exit"
              drag
              dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
            />

        </div>
    </AnimatePresence>
</div>