Menu
I have been trying to implement framer-motion exit animations on a Next JS 13 project with the new app router,
AnimatePresense does work but not on exit animations it seems like the mode="wait" is either broken or I am doing it wrong
my app directories
app
- layout.tsx
- page.tsx
- projects
-- project
--- page.tsx
what I have tried:
** I have added AnimatePresense to app/layout.tsx like this
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<AnimatePresence mode="wait">{children}</AnimatePresence>
</body>
</html>
);
}
** added animations to app/page.tsx
const Home = () => {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 3 } }}
exit={{ opacity: 0, transition: { duration: 5 } }}
className="grid gap-4 grid-cols-[repeat(1,minmax(400px,_1fr))] grid-rows-[repeat(4,minmax(400px,_1fr))] items-center justify-center"
>
<Link href="/projects/project">project page</Link>
</motion.div>
);
};
** added animations to app/prjects/project/page.tsx
const Project = () => {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 3 } }}
exit={{ opacity: 0, transition: { duration: 5 } }}
className="h-20 w-full bg-black text-white"
>
<Link href="/">back</Link>
</motion.div>
);
};
also I tried adding app/template.tsx instead of app/layout.tsx as Next docs recommend this for page transitions
const Template: FC<{ children: ReactNode }> = ({ children }) => {
return (
<AnimatePresence mode="wait">{children}</AnimatePresence>
);
};
still not working, any recommendations ?
870
As far as I am aware, using Framer Motion for "page exit" animations does not currently work in Next.js 13 with the app directory.
There are threads about it in both the Next.js repo issues and Framer repo issues:
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
