It is really simple to add transitions between pages with Framer Motion in Remix.
The best part of this configuration we are about to add is that we need to do it in just one file root.tsx.
Let's add our animation in the entry file of our project:
// app/root.tsx import { AnimatePresence, motion } from "framer-motion"; export default function App() { return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body className="overflow-x-hidden overflow-y-hidden grid place-content-center h-screen"> <AnimatePresence exitBeforeEnter mode="wait"> <motion.div key={useLocation().pathname} variants={{ initial: { opacity: 0, y: -1000 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 1, y: 1000 }, }} initial="initial" animate="animate" exit="exit" > <Outlet /> </motion.div> </AnimatePresence> <ScrollRestoration /> <Scripts /> <LiveReload /> </body> </html> ); }
And that's it. It's time for you to work in a good animation.
Abrazo. blissmo.
Related links
