Infinite Marquee with gradient text

[Clop1986]

Hello everyone. I need to make an endless running line with gradient text that changes as it moves, like in the example, it works, but there are problems in Safari, everything twitches there and the letters seem to run into each other, maybe you can make exactly the same behavior on gsap, but so that it also works well in Safari, without any animation twitching

See the Pen ZEgZegP by Clop1986 (@Clop1986) on CodePen.

[mvaneijgen]

Hi @Clop1986 welcome to the forum!

 

I don't see any twitching on safari version 18.3, also we love to help GSAP related questions, this uses no GSAP, so there isn't really much we can help with. 

 

If you want to port this to GSAP, we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

For this you could check out your seamless loop helper function, check it out https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

Here is a starter template which loads all the plugins 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

Is worth mentioning that using the Horizontal Loop helper function is not going to work the way you expect because you have a blending mode applied in your CSS. That will basically create a new stacking context and as soon as a transform is applied to the text elements, which is what the Horizontal Loop helper does for better performance, the blend mode will stop working.

 

Here you can read more regarding stacking context:

https://www.joshwcomeau.com/css/stacking-contexts/

 

Happy Tweening!