How to make GSAP marquee item change line immediately, not waiting all items finished animation?

[Oliver Chen]

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?

[Cassie]

Hi Oliver -

You can use stagger! If you put the repeat inside the stagger object you won't have to wait for all the boxes to finish animating
 

gsap.to(".box", {
  y: 100,
  stagger: { // wrap advanced options in an object
    each: 0.1,
    repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish
  }
});

And yes, canvas is more performant than animating DOM elements. However it's also less accessible and it can be more complex/time-consuming to create - so it's a trade off. 

 
Hope this helps.

[Oliver Chen]

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?

 

[OSUblake]

Did this answer your question?

 

 

That helper function makes use of the ModifersPlugin to wrap content.

https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin