[Infinite marquee scroll is not working - GSAP and Vue]

@Rodrigo Thank you. Is it possible to somehow combine this with scrolling text when scrolling the page?Is there a way to

[Infinite marquee scroll is not working - GSAP and Vue]

I'm making infinite marquee scroll using GSAP and Vue 2.0. It should look like that: attachment below

Why does infinite text scrolling to the left work but not to the right?

This should illustrate the problem: https://i.stack.imgur.com/8WJOh.png

As you can see, "looking good" text looks fine, while "not looking good" scrolling text breaks off and resets.

 

That's my template inside vue:
 

<div
    id="thats-me-block"
    class="text-white flex flex-col text-[64px] font-semibold leading-[50px] text-center overflow-hidden relative"
  >
    <div class="thats-me-inner opacity-50">
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
    </div>
    <div class="thats-me-inner opacity-[62.5%]">
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
    </div>
    <div class="thats-me-inner opacity-75">
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
    </div>
    <div class="thats-me-inner opacity-[87.5%]">
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
      <span class="thats-me-span left">THAT'S ME</span>
    </div>
    <div class="thats-me-inner">
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
      <span class="thats-me-span right">THAT'S ME</span>
    </div>
    <canvas ref="canvas" class="absolute"></canvas>
  </div>

That's my gsap functions animating texts infinitly:

const loaded = () => {
  gsap.to('.thats-me-span.right', {
    xPercent: 100,
    duration: 5,
    ease: 'linear',
    repeat: -1,
  })
  gsap.to('.thats-me-span.left', {
    xPercent: -100,
    duration: 2,
    ease: 'linear',
    repeat: -1,
  })
}

 

Thank you for any help!

See the Pen abpyGQy by bappla (@bappla) on CodePen