Jump to content


Moving objects to same coordinates

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


Hope everyone has had a productive week! 


Messing around with some practice animations today & I couldn't help but wonder how one would move multiple objects to the same position, even if they are in different positions on the page. My guess is storing the end x/y positions in variables & then tweening to that?


I've done the values manually (very rough) but nevertheless, I'd love to know how all of you would go about such a thing. Secondly, I was thinking about was how you would then time them so the furthest one still looks the same ease as the closest one. Will have a shot at that now, assuming it's just a bit of division for that part.





See the Pen oQvmZy?editors=0010 by themidnightstudio (@themidnightstudio) on CodePen

Link to comment
Share on other sites

You can use variable to store positions if your content isn't dynamic or you know you won't be changing it. If not, then you will need to get their position by using getBoundingClientRect and calculate the difference between their position. If your elements are of different size and you want them to stack on each other then you will need to calculate their center by using height and width(you can get height and width from getBoundingClientRect).


Following is demo I made for another thread where I am changing the parent of element and then calculating the difference between the changed position and original position. You can use similar logic to achieve that effect. Just instead of recording values after changing parent you will have to loop through elements to record and calculate difference in position.


See the Pen OZOWqG by Sahil89 (@Sahil89) on CodePen


Well all elements will have same ease but it will look different based on distance. If you meant they should start depending on how far they are and their speed while arriving should be same, then you will have to set their duration and start time by calculating the difference between distance.

  • Like 4
  • Thanks 1
Link to comment
Share on other sites



Thank's for the demo :)


Very interesting, will have a go at this later on! 

Link to comment
Share on other sites

Another approach (though not always practical) is to create every element at 0,0 with position:absolute. It makes calculations and animating elements to specific coordinates pretty easy.


Happy tweening.



  • Like 3
  • Thanks 1
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.