<div class="wrapper">
  <p class="text-2xl text-center">スクロールしてね<br>↓↓↓↓↓↓↓</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text1">スクロールで</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text2">アニメーションが</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p class="moveText w-full mx-auto py-4 text-6xl font-bold text-center text-white duration-300 text3">実装できる！！！</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>

.wrapper {
  width: 100%;
  height: 100vh;
  padding: 48px 0;
  background-color: "ececec";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.text1,
.text3 {
  background-color: #003e92;
  transform: translateX(-100%);

  &.is-active {
    transform: translateX(0);
  }
}

.text2 {
  background-color: #003e92;
  transform: translateX(100%);

  &.is-active {
    transform: translateX(0);
  }
}

const move_text_animation = () => {
  const moveText = document.querySelectorAll(".moveText");

  const options = {
    root: document.querySelector(".wrapper"),
    rootMargin: "-10% 0px",
    threshold: 0
  };

  const observer = new IntersectionObserver(callback, options);

  moveText.forEach((text) => {
    observer.observe(text);
  });

  // 要素が表示されたら実行する動作
  function callback(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-active");
      }
    });
  }
};

move_text_animation();