Along a path
Scroll progress moves a dot along a CSS offset-path.
Scroll the pageEdit
/* The route stays put, so it measures scroll progress for the dot. */
.route {
--k-when: scroll;
position: relative;
width: 400px;
max-width: 100%;
height: 220px;
margin: 70px auto;
}
.route__line {
position: absolute;
inset: 0;
fill: none;
stroke: #c7d3ee;
stroke-width: 3;
stroke-dasharray: 6 8;
}
/* The dot reads the route's progress. */
.route__dot {
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: #ff5d6c;
offset-path: path("M 20 180 C 110 20, 290 20, 380 180");
offset-distance: calc(var(--k-progress) * 100%);
}