shared element transition with framer motion | Remix | Page 1

silk osprey Sep 21, 2022, 12:39 PM

#

Hi everyone,
I'm using framer motion with remix, and trying to do a shared element transition

in index route, I added

export default function Index() {
  return (
    <main className="relative min-h-screen">
      <motion.div
        layoutId="logo"
        className="h-[400px] w-[400px] bg-[yellow]"
      ></motion.div>
    </main>
  );
}

and in about route, I added

export default function About() {
  return (
    <main className="relative min-h-screen">
      <motion.div
        layoutId="logo"
        className="h-[400px] w-[400px] bg-[yellow]"
      ></motion.div>
    </main>
  );
}

but no transition happens betwen the two elements that have layoutId="logo"

Does anyone have an idea why that is?

odd pond Sep 21, 2022, 6:02 PM

#

I'm not too familiar with framer, but the motion.div in the parent route around the <Outlet /> component. This will most likely be in your root.tsx

silk osprey Sep 22, 2022, 8:27 AM

#

odd pond I'm not too familiar with framer, but the `motion.div` in the parent route aroun...

here is the default exported from root.tsx

export default function App() {
  const outlet = useOutlet()

  return (
    <html lang="en" className="h-full">
      <head>
        <Meta />
        <Links />
      </head>
      <motion.body className="h-full">
          {outlet}
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </motion.body>
    </html>
  );
}

#shared element transition with framer motion