Sticky items for set range

canvas.html

@@ -46,6 +46,7 @@
 
         .anchor {
             cursor: pointer;
+            /* TODO investigate scroll-snap-align: center; having scroll-snap-type: y proximity; on html*/
         }
 
         /*Filenames with code blocks: https://stackoverflow.com/a/58199362*/
@@ -104,9 +105,11 @@
             border-radius: 5px;
             color: white;
         }
+
         .anchor.active:not(.playing):hover::before {
             background: black
         }
+
         .anchor.playing:hover::before {
             content: '⏸︎';
             position: absolute;
@@ -152,6 +155,10 @@
             div.controls{display:none !important;}`
         );
 
+        function easeInOutSine(x) {
+            return -(Math.cos(Math.PI * x) - 1) / 2;
+
+        }
 
         function easeInOutQuart(x) {
             return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
@@ -224,6 +231,10 @@
                     prev = offset
                 }
 
+
+                const sticky_dy = 200;
+                const intro_outro_dy = window.innerHeight + sticky_dy;
+
                 let source_pos, target_pos, source_scale, target_scale, source_color, target_color, source_x_offset, target_x_offset;
 
                 const x_column_width = window.innerWidth - document.body.getBoundingClientRect().width + 200; // for some reason the 200 is neccesary
@@ -232,8 +243,11 @@
 
                 const fit_scale = x_column_width / (canvasCenter[0] * 1.7)
 
+                let sticky_start = true;
+                let sticky_end = true;
+
                 if (prev === null) {
-                    prev = [next[0] - window.innerHeight / 2, null]
+                    prev = [next[0] - intro_outro_dy, null]
 
                     source_scale = fit_scale
                     target_scale = .45
@@ -246,8 +260,10 @@
                     source_x_offset = x_center_map;
                     target_x_offset = x_center_column;
 
+                    sticky_start = false; // no sticky before first item
+
                 } else if (next === null) {
-                    next = [prev[0] + window.innerHeight / 2, null]
+                    next = [prev[0] + intro_outro_dy, null]
 
                     source_scale = .45
                     target_scale = fit_scale
@@ -260,6 +276,8 @@
                     source_x_offset = x_center_column;
                     target_x_offset = x_center_map;
 
+                    sticky_end = false; // no sticky after last item
+
                 } else {
                     source_pos = centerPoints[prev[1]]
                     target_pos = centerPoints[next[1]]
@@ -273,9 +291,25 @@
                 }
 
 
-                const t = Math.min(1, Math.max(0, (center_y - prev[0]) / (next[0] - prev[0])))
+                const t_old = Math.min(1, Math.max(0, (center_y - prev[0]) / (next[0] - prev[0])))
-                t_ease = easeInOutQuart(t)
+                const s = (center_y - prev[0] - (sticky_dy * sticky_start)) / (next[0] - prev[0] - (sticky_start + sticky_end) * sticky_dy);
-                // t_ease = easeInOutBack(t)
+                const t = Math.min(1, Math.max(0, s))
+                // console.log(t_old, t)
+                t_ease = easeInOutSine(t)
+                // t_ease = easeInOutQuart(t) // use this if not snapping
+
+                let sticky_offset = 0;
+                if (s > 0 && s < 1) {
+                    // scrolling from one item to the next
+                    sticky_offset = t_ease * (sticky_start + sticky_end) * sticky_dy - (sticky_dy * sticky_start);
+                } else {
+                    // sticky item
+                    if (sticky_end && center_y > next[0] - sticky_dy) {
+                        sticky_offset = sticky_dy - (center_y - next[0] + sticky_dy)
+                    } else if (sticky_start && s <= 0) {
+                        sticky_offset = ((center_y - prev[0]) / sticky_dy) * (- sticky_dy);
+                    }
+                }
 
                 const dx = target_pos[0] - source_pos[0];
                 const dy = target_pos[1] - source_pos[1];
@@ -288,7 +322,7 @@
                 scale = source_scale + t_ease * ds;
                 x_offset = (target_x_offset - source_x_offset) * t_ease + source_x_offset
                 x = -1 * (source_pos[0] + dx * t_ease) * scale + x_offset;
-                y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2;
+                y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2 + sticky_offset;
 
                 const color = (target_color - source_color) * t_ease + source_color
                 // sheet.rules[0].style.setProperty('--override-color', `rgba(${color},${color},${color},0.7)`);

paper.css

@@ -3,7 +3,7 @@ html {
     font-family: sans-serif;
     font-size: 20px;
     color: #1a1a1a;
-    background-color: #fafafa;
+    background-color: white;
   }
   body {
     margin: 0 50px 0 auto;