Next.js Discord

Discord Forum

How to achieve this page transition effect in next.js

Unanswered
Anay-208 posted this in #help-forum
Open in Discord
Anay-208OP
So I wanted to build a page transition with nextjs. I was researching and found out I can use template.js with framer motion for it.

However, I want to make a slide left animation i.e. the new page should slide from right to left.

However, While the animation is taking place, I want the current page to still be there, until the new page has overlayed that page.

How can I achive this effect?

22 Replies

Chub mackerel
did you use exitBeforeEnterprop in AnimatePresence??
Anay-208OP
I’m try it
Chub mackerel
did it work?
Anay-208OP
exitBeforeEnter is depreciated, so I tried using mode=wait
and it didn't work
-# template.tsx
"use client";

import { AnimatePresence, motion } from "framer-motion";

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <AnimatePresence mode="wait" >
    <motion.div
      initial={{ x: "100%", opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.75 }}
      exit={{ opacity: 0}}

    >
      {children}
    </motion.div>
    </AnimatePresence>
  );
}
Anay-208OP
even tried this:
"use client";

import { AnimatePresence, motion } from "framer-motion";
import { usePathname } from "next/navigation";

export default function Template({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        initial={{ x: "100%", opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        transition={{ ease: "easeInOut", duration: 0.75 }}
        exit={{opacity: 0 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}
Anay-208OP
video recording. As soon as I click "Contact", I want current page to fade out then new page to slide in
West African Lion
why dont you just fake route
make a component that wraps your page contents and then just client side call a switch between the page contents
you can fake route using next/link too and then just whatever page your on let the component take as prop what page it should show, so that ur real routes still work but the switching is just clientside
@Anay-208
West African Lion
you can literally just write 1 component that you render on all the routes
and let it take in a pathname prop
@West African Lion you can literally just write 1 component that you render on all the routes
Anay-208OP
So do I manually handle domain slugs and all? I could've just used react with vite then. I'm using nextjs for a reason.
@Anay-208 So do I manually handle domain slugs and all? I could've just used react with vite then. I'm using nextjs for a reason.
West African Lion
Then your best hope is using next/link and prefetching all the links and faking the transition
chisto
you can use next-view-transitions
https://next-view-transitions.vercel.app/
@chisto you can use next-view-transitions https://next-view-transitions.vercel.app/
Anay-208OP
I checked it out and it isn't quite what I was looking for
Anay-208OP
I'm currently trying this: https://github.com/ismamz/next-transition-router

Edit: didn't turn out that well
Anay-208OP
https://stackoverflow.com/questions/77691781/exit-animation-on-nextjs-14-framer-motion
Tried this, but I'm get a warning in the console, asking in the comment of the answer if someone got a fix
It is using next internal undocumented features