Infinite marquee scroll is not working - GSAP and Vue

[Justusik]

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

[Rodrigo]

Hi @Justusik and welcome to the GreenSock  forums!

 

In these cases is better to use the Horizontal  Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Here is a fork of your codepen:

See the Pen GRweYYJ by GreenSock (@GreenSock) on CodePen

 

Here is an example in Vue3 (porting this to Vue2 shouldn't be too complicated):

 

Hopefully this helps.

Happy Tweening!

[Justusik]

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

[Rodrigo]

Sure thing, something like this:

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen

 

Just in case same example but using Observer Plugin:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps

Happy Tweening!