I need help on making website scroll timeline

I'm trying to achieve a timeline that goes till the end of all the days when It comes nearly to the center of the screen but after a period of time it sadly starts to appear much later which leads to the last one appearing nearly at the top of the screen so what can I do to fix this?

    .timeline-bar {
      content: " ";
      position: absolute;
      width: 4px;
      height: 3205px;
      border-radius: 5px;
      left: 488px;
      top: 0;
      background-color: #e72f32;
      z-index: 2;
      scale: 1 0;
      overflow: hidden;


      animation: TimelineBarFill steps(19,jump-none) forwards;
      animation-timeline: view();
      animation-range-start: 4.5%;
      animation-range-end: exit;
      transform-origin: top;
    }

    @keyframes TimelineBarFill {
      to {
        scale:1 1;
      }
    }


If anyone knows how to make steps smoother It can be cool too but not necessary
chrome_VDtoHzHuOY.gif
Was this page helpful?