Oliver Chen

Oh! I find the idea video which I expect the animation loop looks like. this one: https://imgur.com/gallery/g69YOg6

https://imgur.com/gallery/BCTwrx2 Here is a shorten version animation, box0 will wait box2 reach the final position, then jump into start position, could I make this animation like a loop, while boxes reach final position, they show on the start position and enter next loop one by one? And here is the codesand box which I code this animation, it works the same function as codepen. https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js Thanks.

Thanks for the reply, let me think about it Maybe it would be better to use pic to describe my question.

Hi everyone it's me again, thanks Zach Sucier and Cassie help me compelete last Issue, result like this url: https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js I face another question is could timeline animation repeat start before the last item finish animation? lastItem(first round timeline animation) ---- firstItem(second round timeline animation)----secondItem(second round timeline animation) should I add another timeline follow the previous one?

Thanks a lot, I tried your method and successfully build the animation I want in this issue. like this url: https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js and after this issue, I face another question is could I make the first marquee item repeat start follow after the last item, without waiting all timeline animation finished. should I add another timeline follow the previous one?

I'm Oliver, a noob of web animation,these two days I'm trying to do gsap marquee side project, I build 500 dom boxes as the sandbox url: https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js&fbclid=IwAR1tbmloHRXHUBHKG5FjBGDAx0TFd9sTkBJfSwpye8CQteO-TO8FNi1w4mw and I have few question: 1.I used setTimeout to seperate each box as a unique timeline animation,so that the single box animation could go to another line immediately after finished last line, instead of waiting the other 499 boxs finished in the same line if I use property stagger. This method would produce 500 timeline instances,it seems not a good idea, are there any methods could produce the same animation in one or few timeline? 2.If I do such animation in canvas,the browser render effciency would be better?