[BUG] Page transition issue. Exit not firing.

[rubenhak]

2. Describe the bug

I'm trying to add transitions between page changes. Using react router v6. The new page animation works, yet, the pervious page disappears immediately. I don't see the exit animation happening. I want either the previous page to perform exit animation, or just the new page to animate over the old one.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/react-framer-motion-page-transition-g1lisx?file=/src/index.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Just click "Home" or "About" menu links.

5. Expected behavior

I want either the previous page to perform exit animation, or just the new page to animate over the old one.

6. Video or screenshots

7. Environment details

React v18, React Router v6.

[hasanaktas]

Can you try this way?

import React from "react";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { Home } from "./pages/Home";
import { About } from "./pages/About";

import { AnimatePresence } from "framer-motion";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

const AnimatedRoutes=()=>{
  const location = useLocation();
  return (
    <AnimatePresence mode='wait'>
    <Routes location={location} key={location.pathname}>
      <Route  path="/" element={<App />}>
        <Route  path="/" element={<Home />} />
        <Route  path="/about" element={<About />} />
      </Route>
    </Routes>
  </AnimatePresence>
  )
}

root.render(
  <React.StrictMode>
    <BrowserRouter>
     <AnimatedRoutes />
    </BrowserRouter>
  </React.StrictMode>
);

[rubenhak]

@hasanaktas, Thank you so much! This works great. I can now see the exit animation and after that there is the new page entry animation.

I wanted to ask if it is possible to start the entry animation before the exit is complete, such that the new page slides right over the old page. Thanks!

https://codesandbox.io/s/react-framer-motion-page-transition-g1lisx