How to fix a scroll svg path JavaScript – Blancer.com Tutorials and projects

I was following a YouTube video so i’m not pretty sure what’s my problem, I just know it’s not working properly. My svg vector appears suddenly on the screen when I scroll down instead of progressively how it’s supposed to be.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Svg Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>Scroll down</h1>
    <svg id="vectorSvg" viewBox="0 0 1459 1350" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path id="vectorPath" d="M1359.5 99.5H99.5V668H1359.5V1251H99.5" stroke="black" stroke-width="198" />
    </svg>

</body>
<script>
    var path = document.querySelector('#vectorPath');
    var pathLength = path.getTotalLength();

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

        if(scrollPercentage >= .99){
            path.style.strokeDasharray = 'none';
        }

        else{
            path.style.strokeDasharray = pathLength + ' ' + pathLength;
        }
    });
</script>

</html>