add nudge animation and ghost for timeline (#3393)

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -104,6 +104,7 @@ function Workspace({
     null,
   );
   const [page, setPage] = useState(1);
+  const [nudge, setNudge] = useState(false);
   const { workflowPanelState, setWorkflowPanelState, closeWorkflowPanel } =
     useWorkflowPanelStore();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
@@ -881,14 +882,34 @@ function Workspace({
 
                 {/* timeline */}
                 <div
-                  className={cn("z-20 h-full w-[5rem] overflow-visible", {
+                  className={cn(
-                    "pointer-events-none hidden w-[0px] overflow-hidden":
+                    "z-20 h-full w-[5rem] overflow-visible",
-                      !blockLabel,
+                    {
-                  })}
+                      "skyvern-animate-nudge": nudge,
+                    },
+                    {
+                      "pointer-events-none hidden w-[0px] overflow-hidden":
+                        !blockLabel,
+                    },
+                  )}
+                  onMouseEnter={() => {
+                    if (timelineMode === "narrow") {
+                      return;
+                    }
+
+                    setNudge(true);
+                  }}
+                  onMouseLeave={() => {
+                    if (timelineMode === "narrow") {
+                      return;
+                    }
+
+                    setNudge(false);
+                  }}
                 >
                   <div
                     className={cn(
-                      "relative h-full w-[25rem] translate-x-[-20.5rem] bg-[#020617] transition-all",
+                      "group relative h-full w-[25rem] translate-x-[-20.5rem] bg-[#020617] transition-all",
                       {
                         "translate-x-[0rem]": timelineMode === "narrow",
                         group: timelineMode === "narrow",
@@ -904,7 +925,9 @@ function Workspace({
                     <div
                       className={cn(
                         "pointer-events-none absolute left-[0.5rem] right-0 top-0 flex h-full w-[400px] flex-col items-end justify-end opacity-0 transition-all duration-1000",
-                        { "opacity-100": timelineMode === "wide" },
+                        {
+                          "opacity-100": timelineMode === "wide",
+                        },
                       )}
                     >
                       <div
@@ -920,6 +943,16 @@ function Workspace({
                     {/* divider */}
                     <div className="vertical-line-gradient absolute left-0 top-0 h-full w-[2px]"></div>
 
+                    {/* slide nudge ghost */}
+                    <div
+                      className={cn(
+                        "slide-nudge-ghost vertical-line-gradient absolute left-0 top-0 h-full w-[2rem] opacity-0 transition-opacity",
+                        {
+                          "skyvern-animate-ghost": nudge,
+                        },
+                      )}
+                    />
+
                     {/* slide indicator */}
                     <div
                       className="absolute left-0 top-0 z-20 flex h-full items-center justify-center p-1 opacity-30 transition-opacity hover:opacity-100 group-hover:opacity-100"

skyvern-frontend/src/routes/workflows/editor/workspace-styles.css

@@ -30,3 +30,37 @@
     transparent 100%
   );
 }
+
+.skyvern-animate-nudge {
+  animation: nudge 0.3s ease-in-out forwards;
+}
+
+.skyvern-animate-ghost {
+  animation: ghost 0.3s ease-in-out forwards;
+}
+
+/* nudge right and little, and then back */
+@keyframes nudge {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* ghost */
+@keyframes ghost {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+  }
+}