Infinite horizontal big text

[maxvia]

Hi guys,

 

I dont understand how I can wrap a big text in order to have an infinite horizontal text.

 

I am trying to reproduce Mikel code pen  but with one text bigger than window width.

 

Here is the codepen I created and would like to tweak accordingly.

 

See the Pen ExgvLLL by skima37 (@skima37) on CodePen

 

Any tips or help is appreciated.

 

Thank you!

 

 

See the Pen oNXoOBq by mikeK (@mikeK) on CodePen

[ZachSaucier]

Hey maxvia. You need to think through this logically before trying to implement it in code. There's no way that you can have text on the screen at all times if there's only one set of text. You'll need at least two elements to be able to wrap and keep something on the page. That could mean adding more text, splitting it up by word, or duplicating the text that you have.

 

Once you get enough text, it's probably easiest to position each text block at the same position at the start. Then offset each's start position by the amount it needs to be offset. Then you should create an animation for each text section that animates that section horizontally for the distance of all of your text widths. Then you use GSAP's modifiers to wrap the horizontal position. 

[maxvia]

Great. Thank you for the answer @ZachSaucier, I was actually looking at some website and saw that they only had one text element however they duplicated the words inside that text element. They probably splitting it up by words then. Make sense.

Thanks!