Need help in React Page transition

Aditya — Mon, 22 Apr 2024 17:34:59 +0000

The page transition is not happening as expected, the navigation component is rendering before the animation begins. How can I avoid this. Please suggest

const loginRouter = createBrowserRouter([
  { path: "/login", element: <Login /> },
  {
    path: "/home",
    element: (
      <Transition>
        <Profile />
      </Transition>
    ),
    errorElement: <SomethingWrong />,
    children: [
      {
        index: true,
        element: (
          <Suspense fallback="loading">
            <Home />
          </Suspense>
        ),
        loader: moviesList,
        errorElement: <NotFound />,
      },
       {
        path: ":category",
        loader: fetchAllMoviesFromCategory,
        element: (
          <Suspense fallback="loading">
            <ListOfMovies />
          </Suspense>
        ),
      },
    ],
  },
]);
function App() {
  console.log("App.js");
  return <RouterProvider router={loginRouter} />;
}

Transition.js

const transitionVariants = {
  initial: {
    opacity: 0,
  },
  animate: {
    opacity: 1,
    transition: { duration: 0.5, delay: 0.7 },
  },
  exit: {
    opacity: 0,
    transition: { duration: 0.5 },
  },
};

function Transition({ children }) {
  const location = useLocation();
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location.pathname}
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
      >
          {children}
      </motion.div>
    </AnimatePresence>
  );
}

export default Transition;

Forem: Aditya

Need help in React Page transition