k

src/components/AnimatedOutlet/au.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, RefObject, useContext, useRef} from "react";
+import {forwardRef, useContext, useRef} from "react";
 import {getRouterContext, Outlet} from "@tanstack/react-router";
 import {motion, useIsPresent} from "framer-motion";
 import {cloneDeep} from "lodash";
@@ -19,11 +19,19 @@ const AnimatedOutlet = forwardRef<HTMLDivElement>((_, ref) => {
     return (
         <motion.div ref={ref}
                     initial={{x: "-100%"}}
-                    animate={{x: 0}}
-                    transition={{duration: 0.3}}
-                    onAnimationComplete={()=>{
-                        (ref as RefObject<HTMLDivElement>).current?.style.removeProperty("transform")
+                    animate={{
+                        x: 0,
+                        transform: "",
+                        transitionEnd: {
+                            transform: "none"
+                        }
                     }}
+
+                    transition={{
+                        duration: 0.4,
+                        ease: "circInOut",
+                    }}
+
         >
             <RouterContext.Provider value={renderedContext.current}>
                 <Outlet/>