From a43885e15eddef6b60f67c4ed9ffd4e95e2f32fa Mon Sep 17 00:00:00 2001
From: David Buezas <david.buezas@gmail.com>
Date: Wed, 2 Nov 2022 19:17:42 +0100
Subject: [PATCH 1/4] feat: make animations snappier

Changes all swipe animation easings to "ease-in" for the first half and "ease-out" for the second half.
---
 src/swipe-navigation.ts | 72 ++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 45 deletions(-)

diff --git a/src/swipe-navigation.ts b/src/swipe-navigation.ts
index 6a3f606..0576339 100644
--- a/src/swipe-navigation.ts
+++ b/src/swipe-navigation.ts
@@ -577,54 +577,36 @@ class swipeManager {
       const tabs = this.#getTabsArray();
 
       if (view != null) {
-        if (Config.animate == "swipe") {
-          const _in = directionLeft ? `${screen.width / 1.5}px` : `-${screen.width / 1.5}px`;
-          const _out = directionLeft ? `-${screen.width / 1.5}px` : `${screen.width / 1.5}px`;
-          view.style.transitionDuration = "200ms";
-          view.style.opacity = "0";
-          view.style.transform = `translate(${_in}, 0)`;
-          view.style.transition = "transform 0.20s, opacity 0.18s";
-          setTimeout(function () {
-            tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
-            view.style.transitionDuration = "0ms";
-            view.style.transform = `translate(${_out}, 0)`;
-            view.style.transition = "transform 0s";
-          }, 210);
-          setTimeout(function () {
-            view.style.transitionDuration = "200ms";
-            view.style.opacity = "1";
-            view.style.transform = "translate(0px, 0)";
-            view.style.transition = "transform 0.20s, opacity 0.18s";
-          }, 250);
-        } else if (Config.animate == "fade") {
-          view.style.transitionDuration = "200ms";
-          view.style.transition = "opacity 0.20s";
-          view.style.opacity = "0";
-          setTimeout(function () {
-            tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
-            view.style.transitionDuration = "0ms";
+        const duration = 200;
+        if (Config.animate) {
+          view.style.transition = `transform ${duration}ms ease-in, opacity ${duration}ms ease-in`;
+          if (Config.animate == "swipe") {
+            const _in = directionLeft ? `${screen.width / 1.5}px` : `-${screen.width / 1.5}px`;
+            const _out = directionLeft ? `-${screen.width / 1.5}px` : `${screen.width / 1.5}px`;
             view.style.opacity = "0";
-            view.style.transition = "opacity 0s";
-          }, 210);
-          setTimeout(function () {
-            view.style.transitionDuration = "200ms";
-            view.style.transition = "opacity 0.20s";
-            view.style.opacity = "1";
-          }, 250);
-        } else if (Config.animate == "flip") {
-          view.style.transitionDuration = "200ms";
-          view.style.transform = "rotatey(90deg)";
-          view.style.transition = "transform 0.20s, opacity 0.20s";
-          view.style.opacity = "0.25";
-          setTimeout(function () {
-            tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
-          }, 210);
+            view.style.transform = `translate(${_in}, 0)`;
+            setTimeout(function () {
+              tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
+              view.style.transform = `translate(${_out}, 0)`;
+            }, duration + 10);
+          } else if (Config.animate == "fade") {
+            view.style.opacity = "0";
+            setTimeout(function () {
+              tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
+              view.style.opacity = "0";
+            }, duration + 10);
+          } else if (Config.animate == "flip") {
+            view.style.transform = "rotatey(90deg)";
+            view.style.opacity = "0.25";
+            setTimeout(function () {
+              tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
+            }, duration + 10);
+          }
           setTimeout(function () {
-            view.style.transitionDuration = "200ms";
-            view.style.transform = "rotatey(0deg)";
-            view.style.transition = "transform 0.20s, opacity 0.20s";
+            view.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
             view.style.opacity = "1";
-          }, 250);
+            view.style.transform = "";
+          }, duration + 50);
         } else {
           tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
         }

From 15e3dede9b1883bf5a746bd38ff1bc0b1b142b89 Mon Sep 17 00:00:00 2001
From: David Buezas <david.buezas@gmail.com>
Date: Thu, 3 Nov 2022 13:02:14 +0100
Subject: [PATCH 2/4] fix: disable transitions while setting up the enter style
 of the new card

---
 src/swipe-navigation.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/swipe-navigation.ts b/src/swipe-navigation.ts
index 0576339..059edfc 100644
--- a/src/swipe-navigation.ts
+++ b/src/swipe-navigation.ts
@@ -581,17 +581,19 @@ class swipeManager {
         if (Config.animate) {
           view.style.transition = `transform ${duration}ms ease-in, opacity ${duration}ms ease-in`;
           if (Config.animate == "swipe") {
-            const _in = directionLeft ? `${screen.width / 1.5}px` : `-${screen.width / 1.5}px`;
-            const _out = directionLeft ? `-${screen.width / 1.5}px` : `${screen.width / 1.5}px`;
+            const _in = directionLeft ? `${screen.width / 2}px` : `-${screen.width / 2}px`;
+            const _out = directionLeft ? `-${screen.width / 2}px` : `${screen.width / 2}px`;
             view.style.opacity = "0";
             view.style.transform = `translate(${_in}, 0)`;
             setTimeout(function () {
-              tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
+              view.style.transition = ""
               view.style.transform = `translate(${_out}, 0)`;
+              tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
             }, duration + 10);
           } else if (Config.animate == "fade") {
             view.style.opacity = "0";
             setTimeout(function () {
+              view.style.transition = ""
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
               view.style.opacity = "0";
             }, duration + 10);
@@ -599,6 +601,7 @@ class swipeManager {
             view.style.transform = "rotatey(90deg)";
             view.style.opacity = "0.25";
             setTimeout(function () {
+              view.style.transition = ""
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
             }, duration + 10);
           }

From d321d09c2524db8a6c442bd0eaab06b90e47ad95 Mon Sep 17 00:00:00 2001
From: Zanna_37 <>
Date: Sun, 6 Nov 2022 21:45:15 +0000
Subject: [PATCH 3/4] style: minor fixes

---
 src/swipe-navigation.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/swipe-navigation.ts b/src/swipe-navigation.ts
index 059edfc..a655a20 100644
--- a/src/swipe-navigation.ts
+++ b/src/swipe-navigation.ts
@@ -459,7 +459,7 @@ class swipeManager {
       logd("Ignoring touch: multiple touchpoints detected.");
       return; // Ignore swipe: Multitouch detected
     }
-    
+
     if (typeof event.composedPath() == "object") {
       for (const element of event.composedPath()) {
         if (element instanceof Element) {
@@ -577,39 +577,44 @@ class swipeManager {
       const tabs = this.#getTabsArray();
 
       if (view != null) {
-        const duration = 200;
         if (Config.animate) {
+          const duration = 200;
           view.style.transition = `transform ${duration}ms ease-in, opacity ${duration}ms ease-in`;
+
           if (Config.animate == "swipe") {
             const _in = directionLeft ? `${screen.width / 2}px` : `-${screen.width / 2}px`;
             const _out = directionLeft ? `-${screen.width / 2}px` : `${screen.width / 2}px`;
             view.style.opacity = "0";
             view.style.transform = `translate(${_in}, 0)`;
             setTimeout(function () {
-              view.style.transition = ""
+              view.style.transition = "";
               view.style.transform = `translate(${_out}, 0)`;
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
             }, duration + 10);
+
           } else if (Config.animate == "fade") {
             view.style.opacity = "0";
             setTimeout(function () {
-              view.style.transition = ""
+              view.style.transition = "";
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
               view.style.opacity = "0";
             }, duration + 10);
+
           } else if (Config.animate == "flip") {
             view.style.transform = "rotatey(90deg)";
             view.style.opacity = "0.25";
             setTimeout(function () {
-              view.style.transition = ""
+              view.style.transition = "";
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
             }, duration + 10);
           }
+
           setTimeout(function () {
             view.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
             view.style.opacity = "1";
             view.style.transform = "";
           }, duration + 50);
+
         } else {
           tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
         }

From 47e7f699320d9e0541a1be22622706513d39a17f Mon Sep 17 00:00:00 2001
From: Zanna_37 <>
Date: Sun, 6 Nov 2022 22:28:42 +0000
Subject: [PATCH 4/4] fix: swipe not possible with animation="none"

---
 src/swipe-navigation.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/swipe-navigation.ts b/src/swipe-navigation.ts
index a655a20..5a4f4e4 100644
--- a/src/swipe-navigation.ts
+++ b/src/swipe-navigation.ts
@@ -577,7 +577,11 @@ class swipeManager {
       const tabs = this.#getTabsArray();
 
       if (view != null) {
-        if (Config.animate) {
+
+        if (Config.animate == "none") {
+          tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
+
+        } else {
           const duration = 200;
           view.style.transition = `transform ${duration}ms ease-in, opacity ${duration}ms ease-in`;
 
@@ -607,6 +611,10 @@ class swipeManager {
               view.style.transition = "";
               tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
             }, duration + 10);
+
+          } else {
+            const exhaustiveCheck: never = Config.animate;
+            throw new Error(`Unhandled case: ${exhaustiveCheck}`);
           }
 
           setTimeout(function () {
@@ -614,9 +622,6 @@ class swipeManager {
             view.style.opacity = "1";
             view.style.transform = "";
           }, duration + 50);
-
-        } else {
-          tabs[index].dispatchEvent(new MouseEvent("click", { bubbles: false, cancelable: true }));
         }
       }
     }