CODEWITHSUNDEEP
animationnext.jsframer-motionpage-transition
tomaszM-dev
tomaszM-dev

Reputation: 17

how can i make page transition animation work in next js and framer motion?

so the problem is when user clicks on navbar link (for example on contact page when current opened page is home) when window is > 0 before animations start router.push is executed and it automatically scrolls to top creating weird movement and then animation start executing.

In my code i tried solutions like adding onExitComplete to my animatePresence component and also disabling link to scroll to top automatically

 <AnimatePresence
    mode="wait"
    onExitComplete={() => {
      if (typeof window !== "undefined") {
        window.scrollTo({ top: 0 });
      }
    }}
  >
    <motion.div key={router.pathname} className="">
      <Component {...pageProps} />
      <SlideUp pathname={pathname} />
      <SlideDown pathname={pathname} />
    </motion.div>
  </AnimatePresence>

and link

 {navItems.map((link, index) => (
        <motion.div variants={menuLinkVars} key={index}>
          <p suppressHydrationWarning onClick={() => handleClick(link)}>
            {link.title}
          </p>
        </motion.div>
  ))}

const handleClick = (link) => {
active.setActiveLink(link.title);

router.push(link.href, {
  scroll: false,
});

};

maybe the main problem is on styling my SlideDown /SlideUp div

  <motion.div
  className="absolute text-white bottom-0 left-0 w-full h-full bg-black origin-top"
  initial={{ scaleY: 1 }}
  animate={{ scaleY: 0 }}
  exit={{
    scaleY: 0,
  }}
  transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
>
  <h1 suppressHydrationWarning>{active.activeLink}</h1>
</motion.div>

Upvotes: -1

Views: 306

Answers (1)

tomaszM-dev
tomaszM-dev

Reputation: 17

I menage to fix the issue by adding position fixed instead of absolute in animations divs, I think i will keep this question for others so that they can implement page transitions in nextjs because it seems to be a bit tricky, also if any of you know how to implement page transitions in newewst app routing instead of old pages i would appreciate commment, thanks best regards!

Upvotes: -1

Related Questions