roadmap animation

static/homepage-roadmap.js

@@ -268,14 +268,15 @@
 //     canvas.style.backgroundColor="transparent";
 // }
 
+let branchesDrawn = [false, false, false, false];  // Track which branches have been drawn
+let branchPositions = [600, 1200, 1800, 2400];  // The vertical positions of each branch
+
 function verticalLine(x, y1, y2, ctx) {
-    // Directly draw the line from y1 to y2
     ctx.moveTo(x, y1);
     ctx.lineTo(x, y2);
 }
 
 function circularArc(x, y, ctx, typeID) {
-    // Draw circular arcs based on the typeID
     if (typeID == 1) {
         ctx.arc(x, y, 30, Math.PI, Math.PI/2, true);  // top-left curve
     }
@@ -291,18 +292,40 @@ function circularArc(x, y, ctx, typeID) {
 }
 
 function horizontalLine(x1, x2, y, ctx) {
-    // Directly draw the horizontal line from x1 to x2 at height y
     ctx.moveTo(x1, y);
     ctx.lineTo(x2, y);
 }
 
+function drawBranch(ctx, canvas_h, index) {
+    var centerX = ctx.canvas.width / 2;
+
+    // Draw branches based on the index (ensuring they remain independent)
+    if (index === 0) {
+        circularArc(centerX - 30, 600, ctx, 3);
+        horizontalLine(centerX - 30, centerX - 400, 630, ctx);
+    }
+    else if (index === 1) {
+        circularArc(centerX + 30, 1200, ctx, 1);
+        horizontalLine(centerX + 30, centerX + 400, 1230, ctx);
+    }
+    else if (index === 2) {
+        circularArc(centerX - 30, 1800, ctx, 3);
+        horizontalLine(centerX - 30, centerX - 400, 1830, ctx);
+    }
+    else if (index === 3) {
+        circularArc(centerX + 30, 2400, ctx, 1);
+        horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
+    }
+
+    branchesDrawn[index] = true;
+}
+
 function draw() {
-    /** @type {HTMLCanvasElement} */
     let canvas = document.getElementById("roadmap");
     canvas.width = 1300;
     canvas.height = 3000;
 
-    if(!canvas.getContext) return;
+    if (!canvas.getContext) return;
     var ctx = canvas.getContext("2d");
     var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
     gradient.addColorStop(0, "#185A4F");
@@ -323,26 +346,25 @@ function draw() {
     ctx.lineJoin = 'round';
     ctx.beginPath();
 
-    // Draw vertical line from the center of the canvas
-    var centerX = canvas.width / 2;  
+    var scrTop = document.documentElement.scrollTop;  // Get the scroll position
+    var canvas_h = ctx.canvas.height;
+
+    // Draw the main vertical line
+    var centerX = canvas.width / 2;
     verticalLine(centerX, 200, 3000, ctx);
 
-    // Draw branches
-    circularArc(centerX - 30, 600, ctx, 3);
-    horizontalLine(centerX - 30, centerX - 400, 630, ctx);
-    
-    circularArc(centerX + 30, 1200, ctx, 1);
-    horizontalLine(centerX + 30, centerX + 400, 1230, ctx);
-    
-    circularArc(centerX - 30, 1800, ctx, 3);
-    horizontalLine(centerX - 30, centerX - 400, 1830, ctx);
-    
-    circularArc(centerX + 30, 2400, ctx, 1);
-    horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
-  
+    // Draw branches as the user scrolls down
+    branchPositions.forEach((pos, index) => {
+        if (scrTop > pos - window.innerHeight * 0.8 && !branchesDrawn[index]) {
+            drawBranch(ctx, canvas_h, index);
+        }
+    });
+
     ctx.stroke();
-    canvas.style.backgroundColor = "transparent";
 }
-draw();
+
+// Redraw on scroll event
 window.addEventListener('scroll', draw);
 
+// Initial draw
+draw();
\ No newline at end of file