fix: Stack View Animation

src/components/BoardReactionMenu/BoardReactionMenu.tsx

@@ -53,7 +53,7 @@ export const BoardReactionMenu = forwardRef((props: BoardReactionMenuProps, ref:
     from: {opacity: 0, transform: "scale(0.3, 0.9) translateY(100%)", "pointer-events": "none"},
     enter: {opacity: 1, transform: "scale(1, 1) translateY(0%)", "pointer-events": "auto"},
     leave: {opacity: 0, transform: "scale(0.3, 0.9) translateY(100%)", "pointer-events": "none"},
-    config: {mass: 1, friction: 20, tension: 380},
+    config: {mass: 1, friction: 30, tension: 380},
   });
 
   return menuTransition(

src/components/NoteDialogComponents/NoteDialogHeader.scss

@@ -27,8 +27,6 @@
       background: var(--accent-color--light);
       border-radius: $rounded--full;
       margin-top: $spacing--base;
-
-      transition: all 0.2s ease-in-out;
     }
   }
 }

src/components/Portal/Portal.tsx

@@ -1,6 +1,6 @@
 import {FC, HTMLAttributes, PropsWithChildren} from "react";
 import FocusLock from "react-focus-lock";
-import ReactDOM from "react-dom";
+import {createPortal} from "react-dom";
 import {useWindowEvent} from "utils/hooks/useWindowEvent";
 import classNames from "classnames";
 import "./Portal.scss";
@@ -37,7 +37,7 @@ export const Portal: FC<PropsWithChildren<PortalProps>> = ({onClose, hiddenOverf
     return theme === "light" ? "accent-color__backlog-blue" : "accent-color__planning-pink";
   };
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div className={classNames("portal", className)} onClick={() => onClose?.()} role="dialog" {...otherProps}>
       <FocusLock autoFocus={false} returnFocus>
         <div

src/components/StackNavigation/StackNavigation.tsx

@@ -28,12 +28,18 @@ export const StackNavigation: FC<StackNavigationProps> = ({stacks, currentStack,
   };
 
   // takes the index of the stack we want to navigate to
-  // if the index is out of bounds, it will navigate to the previous or next column
+  // if the index is out of bounds, it will navigate to the previous or next column, animated using the View Transition API
   const handleNavigation = (index: number) => {
     const stackId = getStackId(index);
     if (stackId) {
-      handleModeration(stackId);
-      navigate(`../note/${stackId}/stack`);
+      if (stacks[index] || !document.startViewTransition) {
+        handleModeration(stackId);
+        navigate(`../note/${stackId}/stack`);
+      } else
+        document.startViewTransition(() => {
+          handleModeration(stackId);
+          navigate(`../note/${stackId}/stack`);
+        });
     }
   };
 

src/routes/StackView/StackView.scss

@@ -7,7 +7,7 @@ $stack-view__min-height: 82px;
 .stack-view__portal {
   backdrop-filter: blur(10px) brightness(0.76) saturate(0);
   background: rgba(var(--accent-color--light-rgb), 0.42);
-  transition: all 0.2s ease-in-out;
+  transition: background 0.2s ease-out;
 }
 
 .stack-view {
@@ -26,6 +26,7 @@ $stack-view__min-height: 82px;
   pointer-events: none;
   background: transparent;
   box-shadow: inset 0 0 0 $column__border-width var(--accent-color--light);
+  transition: box-shadow 0.2s ease-out;
 }
 
 .stack-view__border--moderating {
@@ -35,10 +36,11 @@ $stack-view__min-height: 82px;
 .stack-view__content {
   position: relative;
 
-  height: auto;
+  height: calc(100vh - $stack-view__header-height - $stack-view__navigation-height);
+  width: 100vw;
   border-radius: $note__border-radius;
 
-  overflow: hidden;
+  overflow: visible;
 
   @include scrollbar();
 }
@@ -52,8 +54,15 @@ $stack-view__min-height: 82px;
 }
 
 .stack-view__animation-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.stack-view__notes {
   display: flex;
   flex-direction: row;
+  justify-content: flex-start;
   max-height: $stack-content-max-height;
   gap: $spacing--sm;
 }
@@ -111,7 +120,7 @@ $stack-view__min-height: 82px;
 }
 
 @media screen and (max-width: $breakpoint--desktop) {
-  .stack-view__animation-wrapper {
+  .stack-view__notes {
     flex-direction: column;
     max-height: initial;
   }

src/routes/StackView/StackView.tsx

@@ -267,7 +267,7 @@ export const StackView = () => {
               ) => (
                 <animated.div style={styles} className="stack-view__animation-wrapper">
                   {item.parent && item.parent.position.column === column?.id && (
-                    <>
+                    <div className="stack-view__notes">
                       <NoteDialogComponents.Note
                         key={item.parent.id}
                         noteId={item.parent.id}
@@ -306,7 +306,7 @@ export const StackView = () => {
                           ))}
                         </NoteDialogComponents.Wrapper>
                       ) : null}
-                    </>
+                    </div>
                   )}
                 </animated.div>
               )}