Fix roll results animation bug 🎉

solomonhawk · Oct 30, 2024 · 50e04f3 · 50e04f3
1 parent c9f4462
commit 50e04f3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/apps/web/src/features/editor/components/editor/results-panel/results-list.tsx b/apps/web/src/features/editor/components/editor/results-panel/results-list.tsx
@@ -56,7 +56,7 @@ export function RollResults({
     <>
       <AnimatedList
         className={cn("flex min-h-0 flex-col gap-8 overflow-auto px-16", {
-          "fade-bottom-90 pb-[5%]": listOverflowing,
+          "fade-list-overflowing": listOverflowing,
         })}
         transition={transitionAlpha}
         listRef={listRef}
@@ -97,10 +97,12 @@ export function RollResults({
       <motion.div
         layout
         transition={transitionAlpha}
-        className="flex justify-end p-16"
+        className={cn("fade-list-mask relative flex justify-end", {
+          "fade-list-mask-visible": listOverflowing,
+        })}
       >
         <div
-          className={cn("duration-500", {
+          className={cn("p-16 duration-500", {
             "!opacity-0": rollResults.length === 0,
           })}
         >

diff --git a/packages/ui/src/components/animated-list.tsx b/packages/ui/src/components/animated-list.tsx
@@ -25,7 +25,6 @@ function AnimatedList({
   className,
   transition = transitionAlpha,
   listRef,
-  onScroll,
   onLayoutAnimationStart,
   onLayoutAnimationComplete,
   children,
@@ -35,9 +34,9 @@ function AnimatedList({
   return (
     <motion.ul
       layout
+      layoutScroll
       ref={listRef}
       className={className}
-      onScroll={onScroll}
       transition={transition}
       onLayoutAnimationStart={onLayoutAnimationStart}
       onLayoutAnimationComplete={onLayoutAnimationComplete}
@@ -57,9 +56,9 @@ const AnimatedListItem = forwardRef<
     <motion.li
       ref={ref}
       layout
-      initial={{ opacity: 0, y: -100 }}
-      animate={{ opacity: 1, x: 0, y: 0, scale: 1 }}
-      exit={{ opacity: 0 }}
+      initial={{ opacity: 0, y: -100, z: 0 }}
+      animate={{ opacity: 1, x: 0, y: 0, scale: 1, z: 0 }}
+      exit={{ opacity: 0, z: 0 }}
       {...props}
     >
       {children}

diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
@@ -87,9 +87,10 @@
 
   html,
   body {
-    @apply bg-background text-foreground;
-    height: 100%;
-    width: 100%;
+    @apply bg-background;
+    @apply text-foreground;
+    @apply h-full;
+    @apply w-full;
   }
 
   #root {
@@ -103,7 +104,31 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23324c48' fill-opacity='0.15'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
   }
 
-  .fade-bottom-90 {
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 90%, transparent 100%);
+  .fade-list-overflowing {
+    @apply pb-36;
+  }
+
+  .fade-list-mask::before {
+    content: "";
+    background-image: linear-gradient(
+      0deg,
+      hsl(var(--background)) 0%,
+      transparent 100%
+    );
+    @apply pointer-events-none;
+    @apply opacity-0;
+    @apply absolute;
+    @apply left-0;
+    @apply top-1;
+    @apply w-full;
+    @apply h-36;
+    @apply translate-y-0;
+    @apply transition-all;
+  }
+
+  .fade-list-mask-visible::before {
+    @apply opacity-100;
+    @apply -translate-y-full;
+    @apply duration-0;
   }
 }