From bffaa1a94df67e622790891e4a22646c9f73b36a Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Thu, 3 Oct 2024 20:50:39 +0200
Subject: [PATCH] Tried to improve on transitions and animations

---
 src/browser/base/content/zen-components        |  2 +-
 .../base/content/zen-styles/zen-animations.css | 18 +++---------------
 .../base/content/zen-styles/zen-decks.css      |  2 +-
 .../base/content/zen-styles/zen-panel-ui.css   |  2 +-
 .../zen-styles/zen-tabs/vertical-tabs.css      |  2 +-
 5 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index 1ed9227c0..c67cca9c7 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit 1ed9227c01611cda9139ca5df8fe715b32568fb1
+Subproject commit c67cca9c7092375dfc2302b45904c8400dcd1846
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index 040918170..0e4d416b2 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -44,17 +44,6 @@
   }
 }
 
-@keyframes zen-zoom-in {
-  from {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes zen-deck-fadeIn {
   0% {
     transform: scale(0.9);
@@ -81,13 +70,12 @@
 
 @keyframes zen-sidebar-panel-animation-2 {
   0% {
-    opacity: 0;
-    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
+    opacity: 1;
+    transform: translateX(-50px);
   }
 
   100% {
-    opacity: 1;
-    transform: translateX(0) scale3d(1, 1, 1);
+    transform: translateX(0);
   }
 }
 
diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css
index 890797ad9..26b9e7053 100644
--- a/src/browser/base/content/zen-styles/zen-decks.css
+++ b/src/browser/base/content/zen-styles/zen-decks.css
@@ -21,7 +21,7 @@
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
-  animation: zen-deck-fadeIn 0.2s forwards;
+  animation: zen-deck-fadeIn 0.2s forwards ease-in-out;
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css
index e87f4449f..9fe6be61f 100644
--- a/src/browser/base/content/zen-styles/zen-panel-ui.css
+++ b/src/browser/base/content/zen-styles/zen-panel-ui.css
@@ -2,6 +2,6 @@ panel[type='arrow'][animate][animate='open'] {
   animation: zen-jello-animation 0.2s ease-in-out;
 }
 
-panel[type='arrow'][animate][animate='cancel'] {
+panel[type='arrow'][animate]:not([animate='open']) {
   animation: zen-jello-out-animation 0.2s ease-in-out;
 }
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 1a1806826..6ca29d7a3 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -83,7 +83,7 @@
     grid-gap: 0 !important;
 
     & .tabbrowser-tab {
-      animation: zen-slide-in 0.2s;
+      animation: zen-slide-in 0.2s ease-in-out;
 
       max-width: unset !important;
       padding: 0 !important;