Как перемещать элемент внутри одного блока во-время скролла страницы через js?

const animItems = document.querySelectorAll('._anim-items');

if (animItems.length > 0) {
  window.addEventListener('scroll', animOnScroll); /* Событие */
  function animOnScroll(params) {
    for (let index = 0; index < animItems.length; index++) {
      const animItem = animItems[index];
      const animItemHeight = animItem.offsetHeight;
      const animItemOffset = offset(animItem).top;
      const animStart = 4;

      let animItemPoint = window.innerHeight - animItemHeight / animStart;
      if (animItemHeight > window.innerHeight) {
        animItemPoint = window.innerHeight - window.innerHeight / animStart;
      }

      if ((pageYOffset > animItemOffset - animItemPoint) && pageYOffset < (animItemOffset + animItemHeight)) {
        animItem.classList.add('_active');
      } else {
        if (!animItem.classList.contains('_anim-no-hide')) {
          animItem.classList.remove('_active');
        }
      }
    }
  }

  function offset(el) {
    const rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return {
      top: rect.top + scrollTop,
      left: rect.left + scrollLeft
    }
  }
  setTimeout(() => {
    animOnScroll();
  }, 300);

}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.main__page {
  flex: 1 1 auto;
}

.text {
  font-size: 44px;
  line-height: 60px;
  text-align: center;
}

.paragraph {}

.paragraph__container {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 20px;
  box-sizing: content-box;
}

.paragraph__container p {
  font-size: 28px;
  margin-bottom: 40px;
  border: 1px solid #000;
  padding: 20px;
}

.neural-investment {
  padding: 170px 0;
  background: #fafafa;
  position: relative;
  z-index: 5;
}

.neural-investment__container {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 20px;
  box-sizing: content-box;
  position: relative;
}

.neural-investment__animation {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.neural-investment__dashed {
  width: 557px;
  height: 557px;
  border-radius: 50%;
  border: 6px dashed #DBDBDB;
  position: relative;
  position: absolute;
}

.anim-dashed._active {
  width: 557px;
  height: 557px;
  border-radius: 50%;
  border: 6px dashed #DBDBDB;
  position: relative;
  position: absolute;
  transition: 0s;
  animation: dashed 20s infinite linear;
}

@keyframes dashed {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.anim-img {
  display: inline-block;
  width: 531px;
  height: 531px;
  margin: 20px 0 0 20px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  transform: scale(0);
  transition: all 3s ease 0s;
}

.anim-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anim-image._active .anim-img {
  transform: scale(1);
}

.neural-investment__image {}

.neural-investment__img {
  width: 531px;
  height: 531px;
  margin: 12px 0 0 12px;
  border-radius: 50%;
  overflow: hidden;
  background-color: royalblue;
}

.neural-investment__body {
  display: flex;
  flex-direction: column;
  row-gap: 200px;
  border: 1px solid red;
}

.neural-investment__content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 575px;
}

.neural-investment__content:nth-child(1) {
  background-color: blueviolet;
  max-width: 876px;
}

.neural-investment__content:nth-child(2) {
  max-width: 684px;
  background-color: yellow;
}

.neural-network__text {}

.investment__text {}

.text {
  /*    transform: translate(0px, 100%);  */
  transition: all 5s ease 0s;
  opacity: 0;
  z-index: 5;
}

.text._active,
._active .text {
  /*    transform: translate(0px, 0px);  */
  opacity: 1;
}

.investment__btn {
  width: 250px;
  margin-top: 30px;
  padding: 12px 24px;
  border-radius: 24px;
  align-self: center;
  background-color: violet;
}

<div class="wrapper">
  <main class="main__page">
    <section class="paragraph">
      <div class="paragraph__container">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur minus perferendis ratione, nostrum cum consectetur, necessitatibus excepturi, odio magni impedit obcaecati natus autem illum doloremque et totam veritatis dolor ducimus. Lorem ipsum dolor
          sit amet consectetur adipisicing elit. Rem consequatur est soluta illo porro. Nam esse provident ullam sint deserunt, expedita quis possimus quisquam itaque, cumque alias tenetur necessitatibus molestiae.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. A quasi ea placeat libero quaerat autem iure explicabo dolorum sapiente dignissimos nulla quos omnis, voluptate dolor deserunt. Iusto quae expedita soluta! Corporis omnis doloremque, similique esse
          magni, totam corrupti voluptatum dolore voluptate saepe reiciendis quaerat, fuga nisi quia impedit tempore cum consequuntur eum! Sunt consequatur nam excepturi quaerat nisi harum unde? Itaque corporis iusto quo unde iure dolorem nulla. Ipsa
          necessitatibus ducimus odio illo? Maxime, velit sunt error architecto et reprehenderit alias numquam amet, iste beatae ex distinctio incidunt tempore quas.
        </p>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, a est dolores vero maxime ullam autem iusto sapiente corporis officiis repellendus fugiat! Nihil in dolor aliquam quaerat similique non tempora! Quibusdam amet ipsum, dolores illum
          fugit optio impedit inventore blanditiis excepturi ipsa laborum consequuntur magnam similique consequatur pariatur maxime magni illo? Quis quos omnis, enim at laborum sit minus modi.
        </p>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste corrupti odio, quia dicta numquam, officiis magnam ducimus fugiat repellendus exercitationem natus quam itaque. Vel officia consequatur soluta, blanditiis facere earum.
        </p>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima ipsam quis cupiditate dicta voluptatibus soluta ipsum doloribus, quibusdam repellat illum corrupti suscipit accusantium nemo, eveniet consectetur. Enim eaque pariatur exercitationem? Inventore
          tempore animi nam enim vero! Et soluta esse tempora aliquam, tenetur sit est. Aliquid explicabo magnam veritatis ex odio voluptatibus dignissimos voluptate, libero nam possimus quidem ea quod id.
        </p>
      </div>
    </section>
    <section class="neural-investment">
      <div class="neural-investment__container">
        <div class="neural-investment__animation _anim-items">
          <div class="neural-investment__dashed anim-dashed _anim-items"></div>
          <div class="neural-investment__image anim-image _anim-items">
            <div class="neural-investment__img anim-img">
              <img src="images/investment/Vector(14).svg" alt="">
            </div>
          </div>
        </div>
        <div class="neural-investment__body">
          <div class="neural-investment__content">
            <div class="neural-network__text text _anim-items">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos temporibus a iusto hic. Suscipit, omnis.
            </div>
          </div>
          <div class="neural-investment__content">
            <div class="investment__text text _anim-items">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, voluptates!
            </div>
            <a href="" class="investment__btn btn btn-rad">Button</a>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>