eicosane

Hello! I'm new to using GSAP and I've seen a lot of solutions regarding endless/looping marquees in the forum/examples, but most of them work on the premise that the boxes have fixed widths. The problem I'm having is that I'm trying to animate my container box that can render an array of strings, and the strings can be longer on shorter and it could contain 10 string elements for example. This may make the container wider than the wrapper itself, or shorter. Unfortunately I still can't wrap my head around modifiers that should be able to solve my issue, in this case that the animation is not "infinite". I tried cloning my containers but that wouldn't solve the issue. If I make the duration "longer" or make all the elements move to containerWidth * array.length I can see some blocks working as intended but then it restarts the animation and it goes all over again. https://codesandbox.io/s/crawler-gsap-forked-olptt?file=/src/App.jsx Here's my codesandbox since I couldn't make it work on a CodePen for some reason. One approach I had in mind was that everytime my container was inside the black wrapper, it would play the clone's second animation to start moving, then after the first animation ended it would go back to the original position and be called again when the second animation was inside the black wrapper and so on... And I would fill the wrapper with as many boxes as needed to make the wrapper always look 'full'. But I tried using onComplete() callback since it seems that onComplete() is never called on arepeat: -1animation. So I don't think that would be a good idea or if there's another, easier alternative. If anyone knows what I'm doing wrong then I'd be grateful if someone could point me to the right direction since I tried a few approaches and none of them have worked for me. It doesn't have to be React related but I was using React since I wanted to make a reusable component out of it.