Looping text with variable length

[mackao]

Hi,

I'm a beginner for both js and gsap, but I have a idea about what I want to have

I what to have a text rolling in the bottom of my site, and I found this answer from Mikel:

This work perfect when the texts are about the same size

The problem is that my is'nt

I've found a lot of solutions for the loop, but all uses either a fixed width, or the width of the first element

 

As you can see on my codepen, the text is removed to soon, when leaving on the left side

Is this possible to fix?

See the Pen xxRbMgW by mackao (@mackao) on CodePen

[ZachSaucier]

Hey mackao and welcome to the GreenSock forums.

 

The issue is logical: How can you get the width of all of your texts? Since they differ you can't just get the width of one and multiply it by how many there are.

 

There are two main approaches to getting the width:

1. Positioning each of your elements in the same row (like display: inline-block with no wrapping or something similar), making sure the parent container has the full width of all of the children (i.e. is not restricted by the viewport's size). Then get the size of the container.
2. Iterate through each of your elements, adding their width (and any spacing between them) together. Then after your iteration is done, you have the full width.

Once you have the full width, you will need to adjust the wrapping logic to use that number instead.

[elegantseagulls]

Another option would be just to duplicate your content and transform the whole container to -50% and just repeat that:

 

See the Pen RwoPbdb by ryan_labar (@ryan_labar) on CodePen

[mackao]

I ended up using @elegantseagulls's solution, it was a good compromise for my case