[Moving element infinitely by x pixels in y seconds]

Thank you guys!

Was stuck on it for several hours, never heard about repeatRefresh before.

[Moving element infinitely by x pixels in y seconds]

HI guys, i have a really easy question, sorry for that, tried to find solution but couldn't do it.

I have several rectangles with a classname of "move". When i push the green button, they should start moving to the left with a certain speed (for example, 200 pixels in 2 seconds).

I use relative translation '-=200'.

I expect to see that they start moving infinitely to the left, go from the screen to the left and continue moving to the left all the time.

But what i get is that every time the animation repeats, they all start from the beginning point.

Also I want the whole animation to be in one timeline so I can easily control it.

 

I have one timeline 'moveTl' which contains one tween.

 

In the main attached codepen I added 'repeat:-1' to the whole timeline.

 

I also tried to add 'repeat:-1' not to the timeline but to the first tween, but nothing changes.

See the Pen mdrdmyx by nikkitucker (@nikkitucker) on CodePen

 

Please help me understand why i'm getting this result and how can i get what i need?

See the Pen OJRJpqE by nikkitucker (@nikkitucker) on CodePen