Jump to content


How would I create this staggered text loop?

Recommended Posts



I have attached a video showing what I mean. Basically the text staggers in and then changes to the next title, which also staggers in. And then it just keeps looping.

I can't find any examples of this, not sure if it's even GSAP that can do it?

Just looking for someone to point me in the right direction, cheers. 


Edit: Just to clarify, I'm only interested in the text animation, not the other stuff going on behind it like the cube spinning etc.. Also I'm not sure how to embed a video instead of linking it. 


Edit2: The codepen is sort of what I'm after, but I want the next text to come down from the top, then fall back down and repeat.

I want the text to fall in starting from the first letter, and then fall out starting from the first letter again. 



See the Pen WNbGzyj by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Seems like a tutorial @Carl did some times back. The only thing you'll need to do is change the animation from top to bottom, add the split text animation and draw a box around your text with overflow hidden.


Good luck! Feel free to post back here if you're stuck with a demo of your own. 

  • Like 3
Link to comment
Share on other sites


I also addressed this question in that other post of yours @terroarr.


Please don't post duplicates because people helping here will lose overview over what has already been answered. Thanks!



  • Like 3
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.