Как реализовать данныйю блок?

RAX7,

function scroller(){
    var path = document.querySelector('#road2'),
        pathLength = path.getTotalLength(),
        elem = document.getElementsByClassName('project-item');

    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),
              drawLength = pathLength * scrollPercentage;
 
          path.style.strokeDashoffset = pathLength - drawLength;
        
          if (scrollPercentage >= 0.99) {
              path.style.strokeDasharray = "none";
          } else {
              path.style.strokeDasharray = pathLength + ' ' + pathLength;

          }
    });
}
scroller();

<div class="project-bg">
                <svg class="round round-one" xmlns="http://www.w3.org/2000/svg" width="100%" height="435" viewBox="0 0 1146 435">
                  <path id="road1" class="cls-1" d="M150,1272H1240a50.063,50.063,0,0,1,50,50.12v330.76a50.063,50.063,0,0,1-50,50.12H294" transform="translate(-146 -1270)"/>
                  <path id="road2" class="cls-2" d="M150,1272H1240a50.063,50.063,0,0,1,50,50.12v330.76a50.063,50.063,0,0,1-50,50.12H294" transform="translate(-146 -1270)"/>
                </svg>
              </div>

На jf заливаю все плывет

Как реализовать данныйю блок?

У меня тоже самое , не знаю как прикрутить добавление классов при прохождении анимации