Trying to make a vertical infinite scroll

[Devotee007]

Hi,

 

I don't know what's wrong. No matter how many words I put in the scroll comes to an end. What have I missed?

//Devotee007

See the Pen zYybRmx by Devotee007 (@Devotee007) on CodePen

[Rodrigo]

Hi,

 

Just remove the overflow-x and change it for overflow: hidden:

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

 

Thanks for the super simple demo, we love those 🎉

 

Hopefully this helps.

Happy Tweening!

[Devotee007]

Thanks for the reply!

I tried it, but I get the same result after changing it to overflow:hidden. The scroll keeps on going but it doesn't repeat directly from the top, there's a long gap before the text starts over from the top. It should be on going without the gap. 

[Rodrigo]

Yeah I see it...

 

I think the reason for this could be the way your text is setup. Honestly IDK if the Vertical Loop helper was design with this in mind, probably not.

 

What I'd try is to create elements with the text inside, get the width of the text element, then rotate the text element and apply that width to each container as the height. It sounds convoluted but is one option.

 

Another option is to give the element a width based on the height of the screen, like width: 100vh, add the text elements, create a horizontal endless loop (using the helper function of course) and then rotate that element. Since the width is equal to the height it should fit, give it an absolute or fixed position and set it to the top/left of the screen.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, that was because the helper function is built for things in the normal flow, meaning the first element is at the top and the last element is at the bottom. 

 

Here's a version that should accommodate you inverting that: 

See the Pen ExGJZXg?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[Devotee007]

Ah, ok, thanks for the info, I didn't know that about the helper function. The solution you did is what I'm looking for, thank you for the help! 

 

//Devotee007