From 1b76641f595442e54ec11531e99ef61ecf90dddc Mon Sep 17 00:00:00 2001
From: VIKTORVAV99 <30777521+VIKTORVAV99@users.noreply.github.com>
Date: Sun, 29 Mar 2026 20:54:01 +0200
Subject: [PATCH] remove animations on history

---
 apps/frontend/src/app.css                     | 48 -----------------
 .../components/timeline/TimelineGraph.svelte  | 52 ++++++++-----------
 apps/frontend/src/routes/history/+page.svelte |  4 +-
 3 files changed, 23 insertions(+), 81 deletions(-)

diff --git a/apps/frontend/src/app.css b/apps/frontend/src/app.css
index 2061422..fc98967 100644
--- a/apps/frontend/src/app.css
+++ b/apps/frontend/src/app.css
@@ -31,54 +31,6 @@
     U+E000-F8FF, U+FE00-FE0F, U+FB00-FB06, U+FEFF, U+FFFD;
 }
 
-/* === Animations === */
-
-/* SVG graph draw-in */
-.graph-line {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-}
-
-.in-view .graph-line {
-  animation: draw-line 1.2s ease forwards;
-}
-
-@keyframes draw-line {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-.graph-node {
-  transform-box: fill-box;
-  transform-origin: center;
-  transform: scale(0);
-}
-
-.in-view .graph-node {
-  animation: pop-in 0.4s ease forwards;
-}
-
-@keyframes pop-in {
-  to {
-    transform: scale(1);
-  }
-}
-
-.graph-fade {
-  opacity: 0;
-}
-
-.in-view .graph-fade {
-  animation: fade-in 0.5s ease forwards;
-}
-
-@keyframes fade-in {
-  to {
-    opacity: 1;
-  }
-}
-
 /* Custom utilities */
 
 @utility page-container {
diff --git a/apps/frontend/src/components/timeline/TimelineGraph.svelte b/apps/frontend/src/components/timeline/TimelineGraph.svelte
index 209da91..ca1946c 100644
--- a/apps/frontend/src/components/timeline/TimelineGraph.svelte
+++ b/apps/frontend/src/components/timeline/TimelineGraph.svelte
@@ -105,73 +105,63 @@
       y1={nodeY(maxGridRow, pxPerMonth)}
       x2={graphData.laneX(0)}
       y2={nodeY(1, pxPerMonth)}
-      class="stroke-surface-600 graph-line"
+      class="stroke-surface-600"
       stroke-width={LINE_WIDTH}
       stroke-linecap="round"
-      pathLength="1"
-      style="animation-delay: 200ms;"
     />
 
     <!-- Branch paths (fork curve + vertical + merge curve combined) -->
-    {#each branchPaths as bp, i}
+    {#each branchPaths as bp}
       <path
         d={bp.d}
         fill="none"
         stroke={bp.color}
         stroke-width={LINE_WIDTH}
         stroke-linecap="round"
-        class="graph-line"
-        pathLength="1"
-        style="animation-delay: {300 + i * 100}ms;"
       />
     {/each}
 
     <!-- Leader lines -->
-    {#each graphData.leaderLines as leader, i}
+    {#each graphData.leaderLines as leader}
       <polyline
         points={leader.points.map((p) => `${p.x},${p.y}`).join(" ")}
         fill="none"
         stroke={leader.color}
         stroke-width={1}
         stroke-dasharray="4 3"
-        class="graph-fade"
-        style="animation-delay: {600 + i * 50}ms;"
       />
     {/each}
 
     <!-- Commit nodes -->
-    {#each graphData.nodes as node, i}
+    {#each graphData.nodes as node}
       {@const ny = nodeY(node.row, pxPerMonth)}
       <circle
         cx={graphData.laneX(node.lane)}
         cy={ny}
         r={NODE_RADIUS}
         fill={node.color}
-        class="stroke-surface-950 stroke-3 graph-node"
-        style="animation-delay: {600 + i * 50}ms;"
+        class="stroke-surface-950 stroke-3"
       />
     {/each}
 
     <!-- Trunk labels (year markers + life labels) -->
-    {#each trunkLabels as label, i}
+    {#each trunkLabels as label}
       {@const mx = graphData.laneX(0)}
-      <g class="graph-fade" style="animation-delay: {800 + i * 50}ms;">
-        <rect
-          x={mx - 16}
-          y={label.y - 8}
-          width="32"
-          height="16"
-          rx="3"
-          class="fill-surface-950"
-        />
-        <text
-          x={mx}
-          y={label.y + 4}
-          text-anchor="middle"
-          class="fill-surface-500 font-semibold tracking-[0.05em]"
-          style="font-size: 0.5625rem;">{label.text}</text
-        >
-      </g>
+      <rect
+        x={mx - 16}
+        y={label.y - 8}
+        width="32"
+        height="16"
+        rx="3"
+        class="fill-surface-950"
+      />
+      <text
+        x={mx}
+        y={label.y + 4}
+        text-anchor="middle"
+        class="fill-surface-500 font-semibold tracking-[0.05em]"
+        style="font-size: 0.5625rem;">{label.text}</text
+      >
     {/each}
   </svg>
 </div>
diff --git a/apps/frontend/src/routes/history/+page.svelte b/apps/frontend/src/routes/history/+page.svelte
index 7fee856..9b34fa6 100644
--- a/apps/frontend/src/routes/history/+page.svelte
+++ b/apps/frontend/src/routes/history/+page.svelte
@@ -2,7 +2,7 @@
   import Timeline from "$components/Timeline.svelte";
   import TitleText from "$components/TitleText.svelte";
   import { timelineEntries } from "$data/metadata";
-  import { inview } from "$lib/actions/inview";
+
   import SEO from "$lib/seo/components/SEO.svelte";
   import { SITE_URL } from "$lib/config";
   import type { PageData } from "./$types";
@@ -20,7 +20,7 @@
 
 <div class="page-container">
   <TitleText path="history" subtitle="My timeline so far" />
-  <section class="flex flex-col gap-4 items-center w-full" use:inview>
+  <section class="flex flex-col gap-4 items-center w-full">
     <Timeline entries={timelineEntries} />
   </section>
 </div>