init

src/features/core/components/animated-outlet.tsx

@@ -0,0 +1,31 @@
+import { Outlet, useRouter } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
+
+const AnimatedOutlet = () => {
+  const router = useRouter();
+  
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={router.state.location.pathname}
+        initial={{ x: '100%', opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: '-100%', opacity: 0 }}
+        transition={{
+          type: 'tween',
+          duration: 0.3,
+          ease: 'easeInOut'
+        }}
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%'
+        }}
+      >
+        <Outlet />
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+export default AnimatedOutlet;