How to transition between pages with Framer Motion and Remix

robot logo saying hello

No te quedes atrás: Actualízate

Suscríbete para recibir información sobre nuevos frameworks, updates, eventos, tips, hacks y más.

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

Animate presence


¿Quieres mantenerte al día sobre los próximos cursos y eventos?

Suscríbete a nuestro newsletter

Jamás te enviaremos spam, nunca compartiremos tus datos y puedes cancelar tu suscripción en cualquier momento 😉

robot logo saying hello
facebook icontwitter iconlinkedin iconinstagram iconyoutube icon

© 2016 - 2023 Fixtergeek