テキストのスクロールアニメーション

<div class="ugkTxtAnime">
  <p>下からにょきっと</p>
  <p class="textAnime txtToTop">ANIMATION</p>
  <p>上からにょきっと</p>
  <p class="textAnime txtToBottom">ANIMATION</p>
  <p>左からさらさらと</p>
  <p class="textAnime txtToRight">ANIMATION</p>
  <p>左からカラーリング</p>
  <p class="textAnime txtColor">ANIMATION</p>
  <p>縦軸にくるくる</p>
  <p class="textAnime txtRotateX">ANIMATION</p>
  <p>横軸にくるくる</p>
  <p class="textAnime txtRotateY">ANIMATION</p>
</div>

.textAnime {
  line-height: 1;
  font-size: 36px;
  font-weight: bold;
  color: #323232;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.textAnime span {
  display: inline-block;
  transition: all ease .5s;
}
.txtToTop span {
  transform: translateY(100%);
}
.txtToBottom span {
  transform: translateY(-100%);
}
.txtToRight span {
  transform: scaleX(0);
  transform-origin: left;
}
.txtColor span {
  color: #E0E0E0;
}
.txtRotateX span {
  opacity: 0;
  transform: rotateY(360deg);
}
.txtRotateY span {
  opacity: 0;
  transform: rotateX(360deg);
}
.fadeIn.txtToTop span {
  transform: translateY(0);
}
.fadeIn.txtToBottom span {
  transform: translateY(0);
}
.fadeIn.txtToRight span {
  transform: scaleX(1);
}
.fadeIn.txtColor span {
  color: #333333;
}
.fadeIn.txtRotateX span {
  opacity: 1;
  transform: rotateY(0);
}
.fadeIn.txtRotateY span {
  opacity: 1;
  transform: rotateX(0);
}

/*テストアップ時のレイアウト用*/
.ugkTxtAnime .textAnime {
  margin-bottom: 80px;
}

document.addEventListener('DOMContentLoaded',() =>{
	const targets = document.querySelectorAll('.textAnime');
	targets.forEach((el) => {
		const text = (el.textContent || '').trim();//文字列を取り出す
		const chars = Array.from(text);//各文字ごとに分割
		el.textContent = "";
		chars.forEach((ch,i) => {
			const span = document.createElement('span');
			span.textContent = ch;
			
			const delay = 0.08 * (i + 1);
			span.style.transitionDelay = `${delay}s`;
			span.style.webkitTransitionDelay = `${delay}s`;
			
			el.appendChild(span);
		});
	});
});

(() => {
  const run = () => {
    const els = document.querySelectorAll('.textAnime');
    if (!els.length) return;

    const update = () => {
      const y = window.pageYOffset || document.documentElement.scrollTop;
      const vh = window.innerHeight || document.documentElement.clientHeight;

      els.forEach((el) => {
        //↓要素の80px下が起点（出すタイミングによって数値を変更）
        const top = el.getBoundingClientRect().top + y + 20;
        //↓画面内に入った時アニメーションを毎回発生させる場合↓
        el.classList.toggle('fadeIn', y >= top - vh);
        //↓アニメーションを初回のみにしたい場合↓
        //if (y >= top - vh) el.classList.add('fadeIn');
      });
    };

    const onChange = () => requestAnimationFrame(update);

    window.addEventListener('scroll', onChange, { passive: true });
    update();
  };

  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', run)
    : run();
})();