Refactor tab animation logic to improve workspace transitions and remove unused CSS animations

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

@@ -100,28 +100,6 @@
   }
 }
 
-@keyframes zen-slide-in {
-  from {
-    transform: translateX(-150%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes zen-slide-in-reverse {
-  from {
-    transform: translateX(150%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
 @keyframes zen-deck-fadeIn {
   0% {
     transform: scale(0.9);

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

@@ -242,23 +242,6 @@
   & .tabbrowser-tab {
     transition: scale 0.07s ease;
     #tabbrowser-tabs &:not([zen-essential='true']) {
-      #tabbrowser-tabs[zen-workspace-animation='previous'] & {
-        animation: zen-slide-in;
-      }
-
-      #tabbrowser-tabs[zen-workspace-animation='next'] & {
-        animation: zen-slide-in-reverse;
-      }
-
-      #tabbrowser-tabs[zen-workspace-animation] & {
-        opacity: 0;
-        transform: translateX(-100%);
-        animation-delay: 0.2s;
-        animation-fill-mode: forwards;
-        animation-duration: 0.2s;
-        animation-timing-function: ease;
-      }
-
       #tabbrowser-tabs[dont-animate-tabs] & {
         opacity: 0;
       }

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

@@ -658,7 +658,7 @@
               setTimeout(() => {
                 // Reactivate the transition after the animation
                 appWrapper.removeAttribute('post-animating');
-              });
+              }, 100);
             }, 700);
           });
         }

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

@@ -1292,6 +1292,19 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Refresh tab cache
     this.tabContainer._invalidateCachedTabs();
 
+    let animationDirection;
+    if (previousWorkspace && !onInit && !this._animatingChange) {
+      animationDirection = (
+        workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid) <
+        workspaces.workspaces.findIndex((w) => w.uuid === window.uuid)
+      ) ? 'right' : 'left';
+    }
+    if (animationDirection) {
+      // Animate tabs out of view before changing workspace, therefor we
+      // need to animate in the opposite direction
+      await this._animateTabs(animationDirection === 'left' ? 'right' : 'left', true);
+    }
+
     // First pass: Handle tab visibility and workspace ID assignment
     const visibleTabs = this._processTabVisibility(window.uuid, containerId, workspaces);
 
@@ -1301,23 +1314,48 @@ 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.tabContainer.removeAttribute('dont-animate-tabs');
-      this._animatingChange = true;
-      setTimeout(() => {
-        this._animatingChange = false;
-        gBrowser.tabContainer.removeAttribute('zen-workspace-animation');
-      }, 600);
+    if (animationDirection) {
+      await this._animateTabs(animationDirection);
     }
   }
 
+  async _animateTabs(direction, out = false) {
+    const tabs = gBrowser.visibleTabs.filter((tab) => !tab.hasAttribute('zen-essential'));
+    return new Promise((resolve) => {
+      let count = 0;
+      const onAnimationEnd = () => {
+        count++;
+        if (count >= tabs.length) {
+          resolve();
+        }
+      };
+      this.tabContainer.removeAttribute('dont-animate-tabs');
+      if (out) {
+        for (let tab of tabs) {
+          tab.animate([
+            { transform: 'translateX(0)' },
+            { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` },
+          ], {
+            duration: 150,
+            easing: 'ease',
+            fill: 'both',
+          }).onfinish = onAnimationEnd;
+        }
+        return;
+      }
+      for (let tab of tabs) {
+        tab.animate([
+          { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` },
+          { transform: 'translateX(0)' },
+        ], {
+          duration: 150,
+          easing: 'ease',
+          fill: 'both',
+        }).onfinish = onAnimationEnd;
+      }
+    });
+  }
+
   _processTabVisibility(workspaceUuid, containerId, workspaces) {
     const visibleTabs = new Set();
     const lastSelectedTab = this._lastSelectedWorkspaceTabs[workspaceUuid];