Way to integrate framer-motion with react-router-dom v6.10

[loudywen]

Hello, I am currently using framer-motion version 10.12.4 and react-router-dom version 6.10.0 for handling page transitions. When changing pages, the new page comes in from the right and the old page goes out to the left. Here's the working code I have:

export function RouteWrapperDemo(): JSX.Element {
  const location = useLocation();
  const locationArr = location.pathname?.split('/') ?? [];
  console.log(locationArr);
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={locationArr[1]}>
        <Route path="/" element={<MyRoot />}>
          <Route path="1" element={<PageOne />} />,
          <Route path="2" element={<PageTwo />} />,
        </Route>
        <Route path="/3" element={<PageThree />} />
      </Routes>
    </AnimatePresence>
  );
}

const routerWithFamer = createBrowserRouter(
  createRoutesFromElements(<Route path="*" element={<RouteWrapperDemo />} />)
);


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AuthProvider>
      <RouterProvider router={routerWithFamer} />
    </AuthProvider>
  </React.StrictMode>
);

The problem with this code is that it does not allow me to use all the new features in version 6.4+ such as loader and action. If I want to use these new features, my code should look like this:

const routerNew = createBrowserRouter(
  createRoutesFromElements([
    <Route path="/" element={<MyRoot />} errorElement={<ErrorPage />}>
      <Route path="1" element={<PageOne />} />
      <Route path="2" loader={profileLoader} element={<PageTwo />} />
    </Route>,
    <Route path="/3" element={<PageThree />} />,
  ])
);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AuthProvider>
      <RouterProvider router={routerNew} />
    </AuthProvider>
  </React.StrictMode>
);

However, with this code, I am unable to trigger the AnimatePresence effect, and I am unsure where to place it. Can someone please advise me on where to put the AnimatePresence?

[Armadillidiid]

Have you found a way to integrate AnimatePresence? I'm currently running into the same issue

[MustafaIBNA]

Have you found a solution ?

[LucjanVolubus]

I found a working solution here: https://stackoverflow.com/a/74352029

[rohitpotato]

@ryanflorence Any idea what's the way forward here? Not really sure how to do transitions anymore.

[LivioGama]

I looked for hours and this is the way: https://codesandbox.io/s/animated-nested-routes-demo-react-router-v6-forked-lxf1bf?file=/src/index.tsx:382-474

I'm actually shocked that it works...

[metalheadcode]

THANK YOU SO MUCH!

[MaxCadmanBC]

I have been looking for a way to approach this issue without having to rely on the Route component syntax at all. It is a little different to the original question but the solution could be similarly applied.

Below is a simplified version of the routing problem I am looking at. I want to animate between the index child route and the "/settings" route.

const Routes = [
  {
    element: <GlobalLayout />,
    path: "/",
    children: [
      {
        element: <SettingsLayout />,
        path: "settings",
        children: [
          {
            index: true,
            element: <SettingsPage />,
          },
        ],
      },
      {
        index: true,
        element: <WorkspacesPage />,
      },
    ],
  },
];

To control the exit animations, I am going to have to use the AnimatePresence component. Putting the component in any of the child routes doesn't work as child routes unmount instantly on navigation including AnimatePresence. It can't delay any unmounting if itself is unmounted.

So the AnimatePresence component needs to persist between child navigations, which suggests it should go in the GlobalLayout component (which contains the app footer and header).

const GlobalLayout = () => {
  return (
    <>
      <AppHeader />
      <Outlet />
      <AppFooter />
    </>
  );
};

Simply wrapping the outlet component in AnimatePresence doesn't seem to work.I don't fully understand why, it might be that the Outlet itself never unmounts and so no animations trigger. It could be that the Outlet key prop never changes and so it can't be tracked by AnimatePresence, or it could be that the Outlet wraps the rendered child routes in other components, so rendered routes are not direct children of AnimatePresence. Either way, I couldn't get AnimatePresence to track changes in the outlet component.

The next question to ask is If AnimatePresence can't track changes, is it possible to manually track changes and trigger animations?

Changes in routes occur during navigation, so we can just use react-router's useLocation hook to track changes to the URL.

AnimatePresence tracks the keys of direct descendants, and if the key changes, then it interprets this as an unmounting of an old component, and a remounting of a new component. We can use this key change behaviour to manually trigger entry/exit animations, without unmounting a component.

Therefore, If we wrap the Outlet Component in a motion.div, and have the key prop of motion.div be unique to the route, then navigating to a new route, changes the key and triggers the exit/entry animations. This simulates the page transitions I was looking for.

Below was some simple code I used to test out the method.

const GlobalLayout = () => {
 const location = useLocation();

 return (
   <>
     <AppHeader />
     <AnimatePresence mode={"wait"}>
       <motion.div
         key={location.pathname}
         initial={{ opacity: 0, x: -50 }}
         animate={{ opacity: 1, x: 0 }}
         exit={{ opacity: 0, x: 50 }}
       >
         <Outlet />
       </motion.div>
     </AnimatePresence>
     <AppFooter />
   </>
 );
};

Back to the original question, you may be able to add a global layout route that can handle the page transitions using this "Outlet wrapping" method?

[PSU3D0]

This was "good enough" for us.

          {/* Main content */}
          <main className="flex-1 overflow-auto">
            <AnimatePresence mode="popLayout">
              <motion.div
                key={location.pathname}
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
              >
                <Outlet />
              </motion.div>
            </AnimatePresence>
          </main>

Looks fairly seamless unless rapidly navigating. We had to remove any exit animation as otherwise things looked awkward