Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

how to make 2 box with different speed?

Recommended Posts



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

  • Like 1
Link to comment
Share on other sites

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 




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

  • Like 2
Link to comment
Share on other sites

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



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). 

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.