Turning into paragraph

I'm turning all characters and whitespaces into spans from paragraph and I'm animating those spans with gsap. The problem is, that the different letters lost connection with words and im getting a bad looking paragraph.

     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;
      }
    );

Then, when animation completes I'm assigning a previous paragraph text content, but the letters move and its not looking good. What is a proper way of doing my animation?