将<span>变成段落

Question

我将所有字符和空格都转换为段落的跨度，并使用gsap为这些跨度设置动画。问题是，不同的字母失去了与单词的联系，使我的段落看起来很糟糕。

const quote = document.querySelector('.paragraph');
const quoteText = quote.textContent;
quote.innerHTML = quote.textContent.replace(
  /\S/g,
  "<span class='letter'>$&</span>"
);

const tl = new TimelineMax();
tl.staggerFrom(
  quote.childNodes,
  1,
  { opacity: 0, y: 200, ease: Power4.easeOut },
  0.02,
  () => {
    quote.textContent = quoteText;
  }
);

然后，动画制作完成后，我将分配上一段文字内容，但字母会移动 而且看起来不太好制作动画的正确方法是什么？