Infinite vertical repeat that autoplays

[Chriis]

Hello. I'm trying to re-use this infinite vertical repeat example and thinking if it's possible to make it look like a rolling credits that autoplays and loops infinitely on page load instead of scrolling it? Looking forward to everyone's idea. Thanks! 

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

[Windpixel]

Hi Chriis,

 

Im not too sure if I have over simplified what you are trying to do, but I have just created a simple timeline with some keyframes, staggering all targets.

Do want them appearing all at once? or one by one?

See the Pen xxBxgog by windpixel (@windpixel) on CodePen

[Chriis]

Thanks, @Windpixel! My use case requires names to appear all at once that bleed to the top and bottom part of the screen

[Windpixel]

50 minutes ago, Chriis said:

Thanks, @Windpixel! My use case requires names to appear all at once that bleed to the top and bottom part of the screen

Ok, Well this might be a good place to start. I stumbled across a Horizontal Loop helper a few months back, so I just converted this to a vertical format.

For the moment, I have left the styling as I think its great to show whats happening. How the items are wrapped around, Ill do another pen in a second to switch out the box elements for some text elements like yours.

See the Pen rNRNmGr by windpixel (@windpixel) on CodePen

[Windpixel]

Here ya go. I will leave the styling to you, hopefully that will get you there.

There is also a little feature in this code that I have left in because I think its cool, it will detect your scroll direction and reverse the direction of the items. Can be removed by tweaking the onupdate in the scroll trigger.

 

See the Pen xxBxdze by windpixel (@windpixel) on CodePen

[Rodrigo]

Great job @Windpixel!

 

Just an FYI, there is a vertical version of the Endless Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#vertical-loop

 

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

 

Here is a fork of your codepen that uses it:

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

 

Happy Tweening!