Help with Infinity text marquee with scroll effect

[Luke Reynolds]

Hi I'm testing out some infinity text carousel/marquee but im running into an issue with the text keeps overlapping and eventually runs out of text. Im not sure where i'm going wrong?

 

See the Pen KwMZqXy by Luke-Reynolds (@Luke-Reynolds) on CodePen.

[mvaneijgen]

Hi  @Luke Reynolds welcome to the forum!

 

Check out this awesome helper function from the docs https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop has most of the features you would want and has fixed all the bugs. 

 

This is how I had done this effect in the past with the helper function. You'll need to flip the logic for the the other direction.  

 

See the Pen wBWRjVR?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

 

Hope it helps and happy tweening! 

[Luke Reynolds]

Hi I have tried using the helper function i have moved this section of the site to a separate code pen for now but it still ends up overlapping?

 

See the Pen gbMZKRq by Luke-Reynolds (@Luke-Reynolds) on CodePen.

 

[mvaneijgen]

.box gets all boxes, so that will throw off the calculations, you'll need to scope the selection to the current parent that houses all the elements. With just one there is no issue

 

 

See the Pen MYeZXxp by mvaneijgen (@mvaneijgen) on CodePen.

 

[Luke Reynolds]

Perfect thank you!

 

[Rodrigo]

Hi,

 

You also might want to have a look at these demos using the helper function,  ScrollTrigger and Observer Plugins for direction/speed change based on scrolling:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen.

 

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!