Page Transitions Framer motion
Make your children_Pages inside AnimatePresence
import { AnimatePresence } from "framer-motion";
// layout.tsx
<body className={inter.className}>
<AnimatePresence>
{children}
</AnimatePresence>
</body>
import { motion } from "framer-motion";
<motion.div
initial={{ width: 0 }}
animate={{ width: "100%" }}
exit={{ x: window.innerWidth, transition: { duration: 0.01 } }}
>
<NavBar />
<Aside image={Banner} />
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 , transition: { duration: 0.1 } }}
>
{/* ... */}
</motion.dev>