animation fix

ui/snippets/navigation/NavigationMobile.tsx

 import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/react';
-import { AnimatePresence, animate, motion, useMotionValue } from 'framer-motion';
+import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
 import appConfig from 'configs/app/config';
@@ -16,17 +16,19 @@ const NavigationMobile = () => {
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
-  const x = useMotionValue(0);
+  const mainX = useMotionValue(0);
+  const subX = useMotionValue(250);
 
   const onGroupItemOpen = (index: number) => () => {
-    animate(x, -250);
     setOpenedGroupIndex(index);
+    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(subX, 0, { ease: 'easeInOut' });
   };
 
   const onGroupItemClose = useCallback(() => {
-    animate(x, 0);
-    setOpenedGroupIndex(-1);
-  }, [ x ]);
+    animate(mainX, 0, { ease: 'easeInOut' });
+    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+  }, [ mainX, subX ]);
 
   const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
   const hasAccount = appConfig.isAccountSupported && isAuth;
@@ -39,8 +41,7 @@ const NavigationMobile = () => {
         <Box
           as={ motion.nav }
           mt={ 6 }
-          style={{ x }}
-          transitionDuration="100ms"
+          style={{ x: mainX }}
         >
           <VStack
             w="100%"
@@ -61,26 +62,20 @@ const NavigationMobile = () => {
           <Box
             as={ motion.nav }
             mt={ 6 }
-            style={{ x }}
-            transitionDuration="100ms"
+            style={{ x: mainX }}
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
               { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
             </VStack>
           </Box>
         ) }
-        <AnimatePresence>
         { openedGroupIndex >= 0 && (
           <Box
             as={ motion.nav }
             mt={ 6 }
             position="absolute"
             top={ 0 }
-              initial={{ x: 250 }}
-              animate={{ x: 0 }}
-              exit={{ x: 250 }}
-              transitionDuration="100ms"
-              transitionTimingFunction="linear"
+            style={{ x: subX }}
             key="sub"
           >
             <VStack
@@ -97,7 +92,6 @@ const NavigationMobile = () => {
             </VStack>
           </Box>
         ) }
-        </AnimatePresence>
       </Box>
       <NavFooter hasAccount={ hasAccount }/>
     </>