From da5b1444f3574561fb4d792a4400b31e3a269726 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 6 May 2025 10:24:15 +0100
Subject: [PATCH] Use scroll driven animations

---
 .../main/components/stages.scss                 | 15 +++++++++++++++
 .../pipeline-console/main/components/stages.tsx | 17 +----------------
 .../main/scroll-to-top-bottom.scss              | 11 ++++++++++-
 .../main/scroll-to-top-bottom.tsx               | 11 +----------
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss
index 166f0df5c..c58444df3 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss
@@ -1,3 +1,9 @@
+@property --additional-height {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: false;
+}
+
 .pgv-stages-graph {
   --card-background: color-mix(
     in srgb,
@@ -23,6 +29,15 @@
       100vh -
         (var(--header-height) + var(--section-padding) + var(--section-padding))
     );
+    animation: grow-height linear forwards;
+    animation-timeline: scroll();
+    animation-range-end: 100px;
+
+    @keyframes grow-height {
+      to {
+        --additional-height: 100px;
+      }
+    }
   }
 
   &--dialog {
diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx
index df1fd530b..9939b85d7 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx
@@ -1,6 +1,6 @@
 import "./stages.scss";
 
-import { CSSProperties, useEffect, useState } from "react";
+import { useState } from "react";
 import {
   TransformComponent,
   TransformWrapper,
@@ -21,20 +21,6 @@ export default function Stages({
   onStageSelect,
 }: StagesProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [sidebarHeight, setSidebarHeight] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setSidebarHeight(window.scrollY);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    handleScroll();
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
 
   return (
     <div
@@ -42,7 +28,6 @@ export default function Stages({
         "pgv-stages-graph--left": stageViewPosition === StageViewPosition.LEFT,
         "pgv-stages-graph--dialog": isExpanded,
       })}
-      style={{ "--additional-height": sidebarHeight + "px" } as CSSProperties}
     >
       <div className={"pgv-stages-graph__controls pgv-stages-graph__heading"}>
         Graph
diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.scss b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.scss
index 5f7fc5434..6e0e68d54 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.scss
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.scss
@@ -1,6 +1,6 @@
 .pgv-scroll-to-top-bottom {
   position: fixed;
-  bottom: calc(var(--section-padding) * 1 + (var(--pgv-offset-bottom, 0px)));
+  bottom: calc(var(--section-padding) * 1);
   right: calc(var(--section-padding) * 2);
   display: flex;
   gap: 0.375rem;
@@ -16,6 +16,15 @@
     scale var(--elastic-transition);
   pointer-events: none;
   z-index: 1;
+  animation: animate-scroll-to-bottom-offset linear forwards;
+  animation-timeline: scroll();
+  animation-range-start: calc(100% - 100px);
+
+  @keyframes animate-scroll-to-bottom-offset {
+    to {
+      translate: 0 -100px;
+    }
+  }
 
   &--visible {
     opacity: 1;
diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx
index 8b79c72a1..a86b577db 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx
@@ -18,20 +18,11 @@ export default function ScrollToTopBottom() {
 
       const atTop = scrollTop <= 10;
       const atBottom = scrollTop + windowHeight >= docHeight - 10;
-      const scrollable = docHeight > windowHeight + 10;
+      const scrollable = docHeight > windowHeight + 100;
 
       setIsAtTop(atTop);
       setIsAtBottom(atBottom);
       setIsScrollable(scrollable);
-
-      // Distance from bottom
-      const distanceFromBottom = docHeight - (scrollTop + windowHeight);
-
-      // Only trigger the offset if we're within 20px from the bottom
-      const offset = Math.max(0, Math.min(100, 100 - distanceFromBottom));
-
-      const root = document.documentElement;
-      root.style.setProperty("--pgv-offset-bottom", `${offset}px`);
     };
 
     updateScrollState();