From f8caf9cb357a3c30fe50bfc3b2e0ecd971d8321f Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 1 Nov 2024 17:13:01 +1100
Subject: [PATCH] fix(Popup): animations playing incorrectly

---
 .../components/MotionDiv.svelte               | 25 +++++++++++++------
 .../pages/settings/shortcuts.svelte           |  9 ++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/svelte-interface/components/MotionDiv.svelte b/src/svelte-interface/components/MotionDiv.svelte
index 8c78f040..6280f886 100644
--- a/src/svelte-interface/components/MotionDiv.svelte
+++ b/src/svelte-interface/components/MotionDiv.svelte
@@ -20,21 +20,32 @@
       let finalKeyframe = { ...keyframe };
 
       if (finalKeyframe.height === 'auto') {
-        divElement.style.visibility = 'hidden';
-        divElement.style.height = 'auto';
-        const height = divElement.offsetHeight;
-        divElement.style.height = divElement.style.height || '0px';
-        divElement.style.visibility = '';
+        const prevHeight = divElement.style.height;
+        const prevVisibility = divElement.style.visibility;
         
-        finalKeyframe.height = `${height}px`;
+        divElement.style.height = 'auto';
+        divElement.style.visibility = 'hidden';
+        divElement.style.position = 'absolute';
+        
+        const autoHeight = divElement.offsetHeight;
+        
+        divElement.style.height = prevHeight;
+        divElement.style.visibility = prevVisibility;
+        divElement.style.position = '';
+        
+        finalKeyframe.height = `${autoHeight}px`;
       }
 
       if (!transition || transition.type === 'spring') {
+        const springConfig = transition?.config || { stiffness: 250, damping: 25 };
         animationOptions = {
-          easing: spring(transition || { stiffness: 250, damping: 25 }),
+          ...transition,
+          easing: spring(springConfig)
         };
       }
 
+      console.log(keyframe)
+
       const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
       return animation.finished;
     }
diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 6517fc86..c0a125e8 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -81,14 +81,17 @@
         initial={{ opacity: 0, height: 0 }}
         animate={isFormVisible ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
         exit={{ opacity: 0, height: 0 }}
-        transition={{ duration: 0.3 }}
+        transition={{
+          type: 'spring',
+          config: { stiffness: 400, damping: 25 }
+        }}
       >
         {#if isFormVisible}
           <div class="flex flex-col items-center">
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1, duration: 0.5 }}
+              transition={{ delay: 0, duration: 0.2 }}
               class="w-full"
             >
               <input
@@ -101,7 +104,7 @@
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.2, duration: 0.5 }}
+              transition={{ delay: 0.05, duration: 0.2 }}
               class="w-full"
             >
               <input