GSAP を使ったアニメーション

https://greensock.com/get-started

<div class="twAnim">色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山</div>

.anim {
  display: inline-block;
  font-size: 2em;
}

const dv = document.querySelector(".twAnim");
const txtArr = dv.textContent.trim().split("");

dv.innerHTML = txtArr.reduce((prev, curr) => {
  return (
    prev = prev + `<span class="anim">${curr}</span>`
  )
}, "");

const spns = document.querySelectorAll(".anim");

spns.forEach((spn, i) => {
  gsap.to(spn, .6, {
    ease: Back.easeOut,
    delay: i * .05,
    startAt: { y: '-50%', opacity: 0 },
    y: '0%',
    opacity: 1
  });
})