Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxvia

Infinite horizontal big text

Recommended Posts

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

Link to post
Share on other sites

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. 

  • Like 4
Link to post
Share on other sites

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!

Link to post
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.

×