4

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>
John Yacoub
  • 91
  • 1
  • 8

1 Answers1

0

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>
Wiljan
  • 51
  • 4
  • Hi Wiljan Thank you for your reply. I had added key in switch complement ` ` would that make any difference? – John Yacoub Jul 30 '20 at 19:40
  • @JohnYacoub I'm not completely sure how React-Router's Switch works internally, I'm currently using Next.JS. I've found this example using `` inside ``: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js Maybe that helps? The only difference I see at first glance is that the used key is location.pathname instead of your location.key, although I doubt that would make any difference. – Wiljan Jul 31 '20 at 06:26
  • Hi wiljan!thank you for the code snippet , I tried but I didn't make any difference as the key is just identifier to let AnimatePresence know which component is being used. – John Yacoub Aug 02 '20 at 20:17
  • You have to specify the key prop as "key={location.pathname}" in the – Esc Official Jul 08 '21 at 19:12