I have a SVG line that triggers on scroll and goes down the page as i scroll. I want the trigger to be at a specific location on the page, but for now, even though the SVG is located further down the page, it starts "growing" as soon as the user starts scrolling (which result in no animation when i arrive at that location, since the SVG is already all scrolled out).

Here's the js of that particular SVG:

var path = document.querySelector('#star-path');
var pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength + ' ' + pathLength;
path.style.strokeDashoffset = pathLength;

window.addEventListener('scroll', () => {
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var drawLength = pathLength * scrollPercentage;
  path.style.strokeDashoffset = pathLength - drawLength;
});

And here is the html snippet...

<svg class="svg" width="10" viewBox="0 0 2 150" id="star-svg">
        <path id="star-path" fill="none" stroke="black" stroke-width="2"  d="M1 0V150" />
    </svg>

... as well as the css:

.svg {
    position: absolute;
    top: 2900px;
    left: 1400px;
    text-align: center;
    overflow: visible;
}

Which element corresponds to that trigger, and what should i do to "delay" it (i am quite new at SVG animations)?

Thanks in advance for your help