how to make 2 box with different speed?

[ajnglagla]

Hello,

 

I am new on GSAP, I have 2 boxes, They have spesific different starting point. Basicly I want them marquee on the screen.

 

But my problem is this 2 boxes always arrive the "final point" at the same time :/ I want them have their own constant speed.

They shouldnt move together, 1st box should be front of the 2nd one.

 

How can I make this right, any suggestion please?

See the Pen YqLaQM by ajnglagla (@ajnglagla) on CodePen

[Carl]

I'm not exactly sure I am understanding the question.

If you start the 2nd animation at a later time that should give you what you want 

 

https://codepen.io/GreenSock/pen/EKLRqw?editors=0010

 

or maybe offset the position of the 2nd item but have it travel at the same speed and start at the same speed.

[GreenSock]

If I understood your goal properly, I think you could simplify things a lot by doing it this way: 

https://codepen.io/anon/pen/aNGaZx?editors=0110

 

It just creates a tween for each that goes from the right to the left (all the way), and then simply adjusts the progress of that tween according to where it's supposed to start on the screen. 

 

By the way, I would strongly recommend animating the "x" instead of "left" because in most cases it'll perform much better. Transforms require less CPU and they can do sub-pixel rendering, so it won't look as jerky as it moves ("left" always snaps to whole pixels...that has nothing to do with GSAP - it's just a browser thing). 

[ajnglagla]

Thank you so much for help. I just started to GSAP and its really cool.