Moving objects to same coordinates

[smallio]

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.

 

Cheers,

Smallio

 

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

[Sahil]

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.

[smallio]

@Sahil

 

Thank's for the demo

 

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

[PointC]

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.

 

[smallio]

@PointC 

 

Oh nice, I hadn't thought of doing it that way.