Working AnimatedOutlet

packages/webui/src/routes/__root.tsx

@@ -1,5 +1,7 @@
-import { Link, Outlet, createRootRoute } from "@tanstack/react-router"
+import { Link, createRootRoute, useMatch, useMatches } from "@tanstack/react-router"
+import { AnimatePresence } from "framer-motion"
 import { Suspense, lazy } from "react"
+import { AnimatedOutlet } from "../AnimatedOutlet"
 
 
 const TanStackRouterDevtools = process.env.NODE_ENV === "production"
@@ -10,6 +12,12 @@ const TanStackRouterDevtools = process.env.NODE_ENV === "production"
 
 
 export function Root() {
+
+    const matches   = useMatches()
+    const match     = useMatch({ strict: false })
+    const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ]
+
+
     return <>
         <div className="container mx-auto mt-8">
             <div className="flex flex-row gap-2 justify-center content-center">
@@ -22,11 +30,18 @@ export function Root() {
                 </Link>
             </div>
 
-            <Outlet />
+            <AnimatePresence mode="popLayout">
+                <AnimatedOutlet
+                    key={nextMatch.id}
+                    initial={{ x: "100%" }}
+                    animate={{ x: "0" }}
+                />
+            </AnimatePresence>
         </div>
 
         <Suspense><TanStackRouterDevtools /></Suspense>
     </>
+
 }
 
 export const Route = createRootRoute({ component: Root })