From 396db8b8f6057b31bd5c99f308764e00a9d31de6 Mon Sep 17 00:00:00 2001
From: Timo Lins <me@timo.sh>
Date: Sun, 21 Mar 2021 19:18:21 +0100
Subject: [PATCH] Improve animations and exit positioning - Hidden toasts now
 stay at their position - Use percentages instead of px for animation

---
 src/components/toast-bar.tsx |  6 +++---
 src/core/use-toaster.ts      | 17 +++++++++--------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/toast-bar.tsx b/src/components/toast-bar.tsx
index 68af70b..40c5985 100644
--- a/src/components/toast-bar.tsx
+++ b/src/components/toast-bar.tsx
@@ -6,13 +6,13 @@ import { Indicator } from './indicator';
 import { AnimatedIconWrapper } from './icon-wrapper';
 
 const enterAnimation = (factor: number) => `
-0% {transform: translate3d(0,${factor * -80}px,0) scale(.6); opacity:.5;}
+0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
 100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
 `;
 
 const exitAnimation = (factor: number) => `
 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
-100% {transform: translate3d(0,${factor * -130}px,-1px) scale(.5); opacity:0;}
+100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
 `;
 
 const ToastBarBase = styled('div', React.forwardRef)`
@@ -57,7 +57,7 @@ const getAnimationStyle = (
     : {
         animation: `${keyframes`${exitAnimation(
           factor
-        )}`} 0.8s forwards cubic-bezier(.06,.71,.55,1)`,
+        )}`} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
         pointerEvents: 'none',
       };
 };
diff --git a/src/core/use-toaster.ts b/src/core/use-toaster.ts
index c4f83dc..736c638 100644
--- a/src/core/use-toaster.ts
+++ b/src/core/use-toaster.ts
@@ -58,18 +58,19 @@ export const useToaster = (toastOptions?: DefaultToastOptions) => {
         opts?: { reverseOrder?: boolean; margin?: number }
       ) => {
         const { reverseOrder = false, margin = 8 } = opts || {};
-        const index = visibleToasts.findIndex((toast) => toast.id === toastId);
-        const offset =
-          index !== -1
-            ? visibleToasts
-                .slice(...(reverseOrder ? [index + 1] : [0, index]))
-                .reduce((acc, t) => acc + (t.height || 0) + margin, 0)
-            : 0;
+        const toastIndex = toasts.findIndex((toast) => toast.id === toastId);
+        const toastsBefore = toasts.filter(
+          (toast, i) => i < toastIndex && toast.visible
+        ).length;
+
+        const offset = visibleToasts
+          .slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
+          .reduce((acc, t) => acc + (t.height || 0) + margin, 0);
 
         return offset;
       },
     }),
-    [visibleToasts, pausedAt]
+    [toasts, visibleToasts, pausedAt]
   );
 
   return {