Make the animation Smooth

maheshj01 · Oct 6, 2024 · 8b8109e · 8b8109e
1 parent 1f1b5c6
commit 8b8109e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 43 deletions.
diff --git a/src/app/(main)/_components/SideBarItem.tsx b/src/app/(main)/_components/SideBarItem.tsx
@@ -33,6 +33,7 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
     const [logTitle, setLogTitle] = useState<string>(log.title || log.id || '');
     const router = useRouter();
     const [fadeIn, setFadeIn] = useState(false);
+    const [fadeOut, setFadeOut] = useState(false);
     const logService = new LogService();
     const publicLogs = ['getting-started', 'shortcuts'];
     const showMoreOptions = !publicLogs.includes(log.id!);
@@ -104,14 +105,18 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
                 break;
         }
     }
-
     const onGenerateTitle = async () => {
         try {
-            setFadeIn(true);
             setTitleLoading(true);
-            const generatedTitle = await logService.generateTitle(apiKey!, log!)
-            setLogTitle(generatedTitle || log.title || log.id || '')
             setFadeIn(false);
+            setFadeOut(true);
+            await new Promise(resolve => setTimeout(resolve, 500)); // Wait for fade-out
+
+            const generatedTitle = await logService.generateTitle(apiKey!, log!);
+            setLogTitle(generatedTitle || log.title || log.id || '');
+            setFadeIn(true);
+            await new Promise(resolve => setTimeout(resolve, 100)); // Short delay before fade-in
+            setFadeOut(false);
         } catch (error) {
             console.error("Error querying Gemini:", error);
         } finally {
@@ -160,7 +165,9 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
                     type="text"
                     value={logTitle}
                     onChange={(e) => setLogTitle(e.target.value)}
-                    className={`text-black dark:text-white mx-2 py-1 w-full border-none focus:outline-none bg-transparent ${fadeIn ? 'reveal-in-animation' : ''}`}
+                    className={`text-black dark:text-white mx-2 py-1 w-full border-none focus:outline-none bg-transparent 
+                        ${fadeOut ? 'fade-out-animation' : ''} 
+                        ${fadeIn && !fadeOut ? 'reveal-in-animation' : ''}`}
                 />
                 <GeminiIcon
                     toolTip="Generate Title"

diff --git a/src/app/style.css b/src/app/style.css
@@ -28,25 +28,13 @@
     }
 }
 
-@keyframes fadeUp {
+@keyframes fadeOut {
     0% {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    20% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    80% {
         opacity: 1;
-        transform: translateY(0);
     }
 
     100% {
         opacity: 0;
-        transform: translateY(-20px);
     }
 }
 
@@ -60,34 +48,13 @@
     }
 }
 
-@keyframes revealFromBottom {
-    0% {
-        clip-path: inset(100% 0 0 0);
-    }
-
-    100% {
-        clip-path: inset(0 0 0 0);
-    }
-}
-
-@keyframes revealFromTop {
-    0% {
-        clip-path: inset(0 0 100% 0);
-    }
-
-    100% {
-        clip-path: inset(0 0 0 0);
-    }
+.fade-out-animation {
+    animation: fadeOut 0.5s ease-out forwards;
 }
 
 .reveal-in-animation {
-    animation: revealFromLeft 1s ease-out;
-    overflow: hidden
-}
-
-.reveal-top-animation {
-    animation: revealFromTop 1s ease-out;
-    overflow: hidden
+    animation: revealFromLeft 0.7s ease-out forwards;
+    overflow: hidden;
 }
 
 .tagline {