From db5dd9ba7f28344e54877cb0bc2e5e9b48b652d1 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 29 Jan 2025 22:49:36 +0100
Subject: [PATCH] Enhance tab animation effects by adjusting transform and
 margin properties for smoother transitions

---
 src/browser/base/content/ZenUIManager.mjs | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index c67229e4b..d8f0d251e 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -217,13 +217,15 @@ var gZenVerticalTabsManager = {
       return;
     }
     const isLastTab = aTab.nextElementSibling === null;
+    const tabSize = aTab.getBoundingClientRect().height;
+    const transform = `-${tabSize}px`;
     gZenUIManager.motion
       .animate(
         aTab,
         {
           opacity: [0, 1],
-          transform: ['translateY(-50px)', 'translateY(0px)'],
-          marginBottom: isLastTab ? [] : ['-20px', '0px'],
+          transform: ["scale(0.95)", "scale(1)"],
+          marginBottom: isLastTab ? [] : [transform, '0px'],
         },
         {
           duration: 0.2,
@@ -234,7 +236,13 @@ var gZenVerticalTabsManager = {
         aTab.style.removeProperty('margin-bottom');
         aTab.style.removeProperty('transform');
         aTab.style.removeProperty('opacity');
-        aTab.style.removeProperty('filter');
+      });
+    gZenUIManager.motion
+      .animate(aTab.querySelector('.tab-stack'), {
+        filter: ['blur(2px)', 'blur(0px)'],
+      })
+      .then(() => {
+        aTab.querySelector('.tab-stack').style.removeProperty('filter');
       });
   },