Improve animations and exit positioning

- Hidden toasts now stay at their position - Use percentages instead of px for animation
timolins · Mar 21, 2021 · 396db8b · 396db8b
1 parent 41aac06
commit 396db8b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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 {