How to transition between pages with Framer Motion and Remix

Cursos

Recursos

Blog

Cada semana nuevos hacks de desarrollo web y diseño.

Guías

Guías completas sobre TS, JS, React, Github y más.

Tutoriales

Ejercicios prácticos para dominar el desarrollo web.

Inicia sesión

How to transition between pages with Framer Motion and Remix

blissmo

@hectorbliss

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.

How to transition between pages with Framer Motion and Remix

blissmo

No te quedes atrás: Actualízate

Related links

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