Jump to content

Oliver Chen

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

Recommended Posts

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:


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?

Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks a lot, I tried your method and successfully build the animation I want in this issue.


like this url:



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?


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.