Join the Webstudio community

Updated 5 months ago

GSAP Loop Infinite X Translate Text Span

At a glance

A community member is trying to create a simple text marquee animation using GSAP that loops infinitely from right to left, but the animation is not working visually despite the transform property changing in the browser's developer tools. Another community member suggests building the animation in a flat file or Codepen first, and then transferring the idea into Webstudio once it's working.

MMr Bean

Hi everyone,

I'm trying to create a simple text marquee animation using GSAP that loops infinitely from right to left. I've got the code set up, and I can see the transform property changing in the browser's developer tools, but nothing is happening visually.

<div class="container">
<span class="scrolling-text">This is my scrolling text.</span>
</div>

gsap.to(".scrolling-text", {
xPercent: -100,
duration: 5,
ease: "linear",
repeat: -1,
modifiers: {
xPercent: gsap.utils.wrap(-100, 0)
}
});

1 comment

JJeremy

Build it out in a flat file or codepen first. Once you get it working there, you can transfer the idea into Webstudio.

Add a reply