Looping Text Marquee Animation

[blizve0]

SUMMARY

Hi I want to create a marquee animation. I want half of these rows to move from left to right and other half from right to left in Criss-Cross Manner. I also want all rows sliding speeds to be little different.

 

EXPECTED BEHAVIOUR

Half Rows should move to right side , move out of the view to right side, then reappear again from left side in an endless Loop and vice versa for other half with different speeds.

 

CURRENT BEHAVIOUR

Half of them are not looping, and the ones which does are not in a proper manner as I want them.

Can be seen in codepen

 

Please Help me to correct my GSAP Animation, Any Help is Appreciated 😁 

See the Pen ZEamPKm by blitzve0 (@blitzve0) on CodePen

[elegantseagulls]

There's a few approaches you could take for this.

 

One would be to duplicate your content line, and transform both elements together to (-)100%, then repeat that infinitely.

Details here:

 

The other thing you can do is use gsap's wrap utility and modifiers to set the out of view elements to the end of the loop. More details here:

 

Here's a simplified codepen that does this in a similar, but slightly different manner.

 

See the Pen MWJpPmP?editors=0011 by elegantseagulls (@elegantseagulls) on CodePen

[blizve0]

Hi I was able to implement the second solution you mentioned, very grateful for that

I just want one more help, maybe two 😅,

1 : I want half Lines to Go Left and Half to Go Right, currently they are going right, I can't figure out how,

2 : Some Items are flashing when they are leaving the screen at the right side