Framer motion Exit animation doesnt work. my divs just disappear instead of sliding away

Question

My animations file

export const transition = { type: "spring", duration: 1 };

export const slideAnimation = (direction) => {
  return {
    initial: {
      x: direction === "left" ? -100 : direction === "right" ? 100 : 0,
      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
      opacity: 0,
      transition: { ...transition, delay: 1 },
    },
    animate: {
      x: 0,
      y: 0,
      opacity: 1,
      transition: { ...transition, delay: 0 },
    },
    exit: {
      x: direction === "left" ? -100 : direction === "right" ? 100 : 0,
      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
      transition: { ...transition, delay: 0 },
    },
  };
};

export const fadeAnimation = {
  initial: {
    opacity: 0,
    transition: { ...transition, delay: 0.5 },
  },
  animate: {
    opacity: 1,
    transition: { ...transition, delay: 0.3 },
  },
  exit: {
    opacity: 0,
    transition: { ...transition, delay: 0 },
  },
};

and my jsx homepage is

const HomePage = () => {
  return (
    <AnimatePresence>
      <motion.div className="card" >
        <motion.div className="card_section1" {...slideAnimation("left")} key="custom">
          <h2 className="title_name">text</h2>
          <motion.h3 className="subtitle" {...slideAnimation("left")} key="custom2">
            {" "}
            {">"} Front-End Developer
          </motion.h3>
          <motion.div
            className="comments_container"
            key="custom3"
            {...slideAnimation("down")}
            {...fadeAnimation}
          >
            <h6 className="comment">{"//"} explore my projects</h6>
            <h6 className="comment">
              {"//"} you can also see it on my Github page
            </h6>
            <h6 className="github">
              <span style={{ color: "#4D5BCE" }}>const</span>{" "}
              <span style={{ color: "#43D9AD" }}>githubLink</span>
              <span style={{ color: "white" }}> = </span>
              <a style={{ color: "#E99287" }} href={githubUrl} target="_blank" rel="noreferrer">
                text
              </a>
            </h6>
          </motion.div>
        </motion.div>
        <motion.div className="card_section2" {...slideAnimation("left")} key="custom4">
          <h3>Main Tecnologies</h3>
          <motion.div className="technologies_image" {...fadeAnimation}>
            {Images.map((image, i) => {
              return <img key={i} src={image} alt={image} />;
            })}
          </motion.div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

Initial and animate animations works fine, but exit animations doesnt work when i switch the homepage to another view (same url but just rendering another component instead of Homepage). I've added unique keys to all my motion divs but still doesnt work. Any help? THANKS!

Answer 1

The AnimatePresence tag needs to be outside of the component that's being conditionally rendered. The way you have it set up now, the AnimatePresence tag is inside the HomePage component. When the page changes, the component gets removed from the DOM along with the AnimatePresence tag. There's nothing left to run the exit animation.

You'd want to have something more like this (in your App or whatever is the parent component):

<AnimatePresence>
   {currentPage === "home" && <HomePage key="homePage" />}
   ...etc
</AnimatePresence>

That way AnimatePresence can track which elements are being removed and run their exit animations before pulling them from the DOM.