Jump to content
GreenSock

terroarr

How would I create this staggered text loop?

Recommended Posts

https://www.awesomescreenshot.com/video/11513107?key=74daa66d781d1569397d157ff045d1e3

 

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.
×