Функция вызова путевой точки, как только секция достигнута

Question

Поэтому в настоящее время я пытаюсь создать динамический SVG, который активируется только после того, как пользователь прокрутил этот раздел.

Я установил путевую точку, чтобы активировать Javascript, как только я перейду к этому разделу, однако он не работает. Я не уверен, что я делаю не так здесь.

Вот мой код

let line = document.getElementById("line");
let length = line.getTotalLength();

// line Scroll
$('.howDoesItWork').waypoint(function() {
  line.style.strokeDasharray = length;
  window.addEventListener("scroll", scrollLine);

  function scrollLine() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    line.style.strokeDashoffset = length - draw;
  });

.verticalLine {
    position: absolute;
    display: block;
    height: 930px;
    z-index: -1;
    left: 110px;
    top: 221px;
  }

  .top-line {
    border-left: 4px solid rgba(0, 204, 90, 0.3);
    position: absolute;
    height: 930px;
    z-index: 1;
  }

  svg line { stroke: green; }

<section class="howDoesItWork">
  <section class="container grid">
    <section class="verticalLine">
      <section class="top-line"></section>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="0" y2="100" stroke-width="1.2" id="line" />
      </svg>
    </section>
  </section>
 </section>