<p>Scroll down</p>

<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>

<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <path d="M70 240 L 160 90 L 250 240 L 340 90 L 430 240" stroke="black" stroke-width="90" stroke-linecap="round" stroke-linejoin="round" fill="none" />
  <circle id="ball" r="40" fill="red"></circle>
</svg>

<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
<p>Scroll Up</p>
svg {
  width: auto;
  height: 50vh;
  margin: auto;
  display: block;
}

#ball {
  offset-path: path("M70 240 L 160 90 L 250 240 L 340 90 L 430 240");
  animation: move 5s alternate;
  animation-timeline: scroll();
  animation-range: 50vh;
}

@keyframes move {
  0%,
  90% {
    offset-distance: 0%;
  }
  10% {
    offset-distance: 100%;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.