It’s simply because you keep changing the value instantly on scroll. I tried and made it smooth by adding a very simple css transition to App.css in the code:

* {
  transition: 150ms all;
}

Once it works, you can change the selector * to the vertical line element, because we dont want it applied to all elements right, this is only for demo.

Also another approach for this. I think by not changing height value all the time but when a certain difference is met.

For example change component to this code, maybe you can try it, at least on my PC it's smooth enough

let lastValue = 0;
function App() {
  useEffect(() => {
    const timeline = document.querySelector(".timeline");
    const timelineDraw = document.querySelector(".timeline__draw");
    const bodyRect = document.body.getBoundingClientRect();
    const timelineOffset = timeline.getBoundingClientRect().top - bodyRect.top;

    var moveIndicator = function () {
      var viewportHeight = window.innerHeight;
      var hasScrolled = window.pageYOffset;
      const scrolledFurther = hasScrolled - timelineOffset + viewportHeight / 4;
      lastValue = lastValue === 0 ? scrolledFurther:lastValue;
      if (scrolledFurther && scrolledFurther > 0) {
        if (scrolledFurther > timeline.clientHeight) {
          timelineDraw.style.height = `${timeline.clientHeight}px`;
          return;
        }
        if (Math.abs(lastValue - scrolledFurther) > 2){
          lastValue = scrolledFurther;
          timelineDraw.style.height = `${scrolledFurther}px`;
        }
        return;
      }

      timelineDraw.style.height = "0px";
    };