How to achieve this page transition effect in next.js
Unanswered
Anay-208 | Ping on replies posted this in #help-forum
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?
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??I’m try it
Chub mackerel
did it work?
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>
);
}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>
);
}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 | Ping on replies
@West African Lion 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
I didn't really like this approach, as I'll have to do it manually for each page.
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
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 | Ping on replies 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
you can use next-view-transitions
https://next-view-transitions.vercel.app/
https://next-view-transitions.vercel.app/
@chisto you can use next-view-transitions
https://next-view-transitions.vercel.app/
I checked it out and it isn't quite what I was looking for
I'm currently trying this: https://github.com/ismamz/next-transition-router
Edit: didn't turn out that well
Edit: didn't turn out that well
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
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