GSAP - text ticker repeat in reverse from left and right

[Galanthus]

I have a text ticker which is by default going to the left, but I need 2 rows and tracks the first one should go to the right and second to the left. However, when set to left there is a huge GAP difference in comparison if I set it to the right side.

 

1st row should go to the left and 2nd row should go to the right.

 

Want to archive something like on this page: https://www.emma-at-work.nl/organisaties/ 

 

 

See the Pen VwXQWom by Merdzanovich (@Merdzanovich) on CodePen

[iDad5]

Well. the easiest way would probably be to write two animation functions and apply them to the first and the second ticker. You can of course parametrize the function, but if you have just tose two, I would  pragmatically copy it and adjust it, gives you mor flexibility.

[Galanthus]

Just now, iDad5 said:

Well. the easiest way would probably be to write two animation functions and apply them to the first and the second ticker. You can of course parametrize the function, but if you have just tose two, I would  pragmatically copy it and adjust it, gives you mor flexibility.

So, instead of using the X -totalDistance use a css animation instead with 2 seperate tickers?

[iDad5]

You could / should use it on the second ticker to, just set it (using gsap.set()) to the right az the beginning and animate to totalDistance instead of to: -totalDistance (Thats just a quick glance, not a tried and tested answer...)