Justusik

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

I'm making infinite marquee scroll using GSAP and Vue 2.0. It should look like that: attachment below https://codepen.io/bappla/pen/abpyGQy 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!