Can't achieve smooth transition between react router pages with Framer Motion

Question

It is been over a week now, and I can't get it to work!, I am trying to make a transition between react pages components to have it scroll up and down for each page.however, on exit page the second page takes longer to be displayed and I can't figure out how to sync it so while the first page goes up, the second page start to goes up as well at the same time.

I am using AnimatePresence with exitBeforeEnter wrapping the app component. Appreciate any help to the right directions.

Below are my variants for each component

const containerVariants = {
  hidden: {
    opacity: 0,
    y: "-100vh",
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      damping: 10,
      mass: 0.4,
      staggerChildern: 0.4,
      // opacity: { duration: 0.02 },
      when: "beforeChildren",
    },
  },
  exit: {
    opacity: 0,
    y: "-100vh",
    zIndex: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      opacity: { duration: 3 },
    },
  },
};

const Home = () => {
 
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
< code goes here>
    </motion.div>

Answer 1

You might already have it, but did you add the keys to pages inside <AnimatePresence? In my experience forgetting them caused issues with animating between pages/components.

Another issue I encountered was because of the key not being set on the immediate child of <AnimatePresence> (I had layout components between AnimatePresence and the pages).

Maybe you already have this all setup correctly, just to be sure :)

In my current project:

<AnimatePresence exitBeforeEnter>
  <Component
    {...pageProps}
    key={router.route}
    err={err}
  />
</AnimatePresence>