Infinite marquee loop

[Dooshan]

Hi, I'm having problems with infinite loop marquee - I don't know how to make it seamless. After the box "1" goes outside the container, it should be appended after the box "5" on the right. Here is the demo 

See the Pen jOKVPZO by stdusan (@stdusan) on CodePen

[GreenSock]

It's hard for me to decipher what you were trying to do there, @Dooshan but...

1. There were errors in your JavaScript (adding an event listener to a null object for example)
2. You were creating two completely different infinite loops simultaneously with totally different techniques on the same elements, so they were conflicting with each other. 
3. You had extra code in there that wasn't serving any purpose at all. 

Are you trying to do this?: 

See the Pen abKNwmr?editors=0010 by GreenSock (@GreenSock) on CodePen

[Dooshan]

48 minutes ago, GreenSock said:

It's hard for me to decipher what you were trying to do there, @Dooshan but...

1. There were errors in your JavaScript (adding an event listener to a null object for example)
2. You were creating two completely different infinite loops simultaneously with totally different techniques on the same elements, so they were conflicting with each other. 
3. You had extra code in there that wasn't serving any purpose at all. 

Are you trying to do this?: 

 

 

Exactly! Thanks. I'm sorry, I shouldn't have play with the original pen. 

[Dooshan]

Just one more question... is it possible to slow down the animation a bit?

[Rodrigo]

Hi,

 

The loop helper function has a config object you can pass. In that object you can specify a speed property:

 - Optionally pass in a config object with values like "speed"
   (default: 1, which travels at roughly 100 pixels per second),
   paused (boolean), repeat, reversed, and paddingRight.

If you want to make it slower just add a value of less than 1:

const loop = horizontalLoop(boxes, { repeat: -1, speed: 0.75 });

Happy Tweening!