I have a project with a few pages that are rendered within a layout with a sidebar and a topbar:

<AnimatePresence exitBeforeEnter>
  <Routes location={location} key={location.pathname}>
    <Route element={<Layout />}>
      <Route path="/" element={<Home />} />
      <Route path="about" element={<About />} />
    </Route>
    {/* Other layouts here... */}
  </Routes>
</AnimatePresence>

I used Frame Motion to add animation when changing pages, as shown here, making adaptations for version 6.

However, when changing pages after adding the animation, the rest of the layout (the sidebar and the topbar) both seem to be completely remounted, as can be seen in the demo, where the counter placed in the sidebar is reset.

The only way I found to have the animation affect only the sub-routes was to make Layout a wildcard and have another <Routes /> component inside <Layout>, but that makes it impossible to have other nested layouts with their own animations.

Is there a way to animate the pages without affecting the layout and without compromising other sub-routes?

demo