javascript – Smooth ReactJS transform animation on window scroll

I was wondering how this type of animation can be achieved. Please refer to the “Discover
OUR STORY” section animation example. I have tried using the following code to achieve the smooth scroll:

handleScroll() {
  const currentPos = window.pageYOffset;
  const node = this.contentRef.current;
  const nodeOffsetTop = node.getBoundingClientRect().top;

  const DIVIDER = 18;

  if (currentPos > nodeOffsetTop) {
    node.style.transform = `translateY(-${currentPos / DIVIDER}%)`;
  }
}

However, as soon as you introduce the second section that is much further away from the top, the values get significantly increased and the section disposition flies to the top. I was wondering if there are more adequate ways of handling such animations