<svg id="curve" viewBox="0 0 86 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path class="line" d="M4 0 L4 44 C4 60 16 80 43 50 C70 20 82 40 82 56 L82 100" />
  <circle cx="0" cy="0" id="ball" r="3" fill="black"></circle>
</svg>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>

html,
body {
  margin: 0;
  padding: 0;
}
#curve {
  height: 100vh;
  width: auto;
  display: block;
  margin: auto;
}
.line {
  fill: none;
  stroke: #ec2426;
  stroke-width: 8;
}
#ball {
  offset-path: path("M4 4 L4 44 C4 60 16 80 43 50 C70 20 82 40 82 56 L82 96");
  animation: move 5s linear;
  animation-timeline: scroll();
  *transform: translateY(-37px);
  offset-distance: 0%;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  40% {
    offset-distance: 300%;
  }
}