How to transition between pages with Framer Motion and Remix

blissmo

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.

Aprende en 5 minutos qué es HTML y cuando utilizar cada una de sus etiquetas

Checa este otro Post

Cómo eliminar archivos sin usar de mi proyecto JS

Checa este otro Post

¡Nuevo curso!

How to transition between pages with Framer Motion and Remix

blissmo

Related links

Aprende en 5 minutos qué es HTML y cuando utilizar cada una de sus etiquetas

Checa este otro Post

Cómo eliminar archivos sin usar de mi proyecto JS

Checa este otro Post

Animaciones web con React + Motion 🧙🏻