Enhance animations and sidebar panel styles for improved UI transitions

src/browser/base/content/zen-styles/zen-animations.css

@@ -56,7 +56,18 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-30px);
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes zen-slide-in-reverse {
+  from {
+    transform: translateX(100%);
     opacity: 0;
   }
   to {
@@ -228,9 +239,9 @@
     height: 0%;
   }
 
-  70% {
+  80% {
     /* make the box grow to full width/height */
-    opacity: .5;
+    opacity: 1;
     transform: translate(-50%, -50%) translateZ(0);
     top: 50%;
     left: 50%;
@@ -253,31 +264,22 @@
   0% {
     /* make the box shrink to final width/height and x/y coordinates */
     transform: translate(-50%, -50%) translateZ(0);
-    opacity: 1;
     width: 85%;
     height: 100%;
     top: 50%;
     left: 50%;
-  }
-
-  50% {
-    /* make the box grow to full width/height */
     opacity: 1;
-    transform: translate(-50%, -50%) translateZ(0);
-    top: 50%;
-    left: 50%;
-    width: 87%;
-    height: 102%;
   }
 
   100% {
     /* make the box appear from initial width/height and x/y coordinates */
+    transform: translate(-50%, -50%) translateZ(0);
     opacity: 0;
+    width: 47%;
+    height: 53%;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) translateZ(0);
-    width: 0%;
-    height: 0%;
+    opacity: 0;
   }
 }
 
@@ -293,10 +295,10 @@
   to {
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     opacity: 1;
-    transform: none;
+    transform: translate(-50%, -50%); 
   }
 }
 

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -4,6 +4,9 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
+    /* For glance */
+    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
     overflow: hidden;
     margin: 1px;

src/browser/base/content/zen-styles/zen-glance.css

@@ -5,7 +5,6 @@
 }
 
 .zen-glance-background {
-  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
   transform: scale(0.98);
   backdrop-filter: blur(5px);
   opacity: 0.6;
@@ -28,7 +27,7 @@
 
     & .browserContainer {
       opacity: 1;
-      animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
+      animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
 
       & browser {
         opacity: 1 !important;

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -277,7 +277,7 @@
 }
 
 :root:not([zen-right-side='true']) {
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
     margin-left: 0 !important;
     margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
   }

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -215,7 +215,21 @@
     }
 
     & .tabbrowser-tab {
-      animation: zen-slide-in 0.2s ease-in-out;
+      animation: none;
+      transition: none;
+      &[fadein='true']:not([zen-essential='true']) {
+        #tabbrowser-tabs[zen-workspace-animation='previous'] & {
+          animation: zen-slide-in-reverse 0.2s ease-in-out;
+        }
+
+        #tabbrowser-tabs[zen-workspace-animation='next'] & {
+          animation: zen-slide-in 0.2s ease-in-out;
+        }
+  
+        &[pinned] {
+          animation-delay: .03s !important;
+        }
+      }
 
       max-width: unset;
       padding: 0 !important;

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -1106,6 +1106,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async _performWorkspaceChange(window, onInit) {
+    const previousWorkspace = await this.getActiveWorkspace();
+
     this.activeWorkspace = window.uuid;
     const containerId = window.containerTabId?.toString();
     const workspaces = await this._workspaces();
@@ -1121,6 +1123,20 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     // Update UI and state
     await this._updateWorkspaceState(window, onInit);
+
+    // Animate acordingly
+    if (previousWorkspace && !this._animatingChange) {
+      // we want to know if we are moving forward or backward in sense of animation
+      let isNextWorkspace = onInit || 
+        (workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid) 
+          < workspaces.workspaces.findIndex((w) => w.uuid === window.uuid));
+      gBrowser.tabContainer.setAttribute('zen-workspace-animation', isNextWorkspace ? 'next' : 'previous');
+      this._animatingChange = true;
+      setTimeout(() => {
+        this._animatingChange = false;
+        gBrowser.tabContainer.removeAttribute('zen-workspace-animation');
+      }, 300);
+    }
   }