Set Position Of Element

[Metapod 0 Likes (Newbie)]

Hi all

 

I have set up a code pen at :

 

See the Pen rKyDj by anon (@anon) on CodePen

 

What I want to do is when an item is clicked, both items go to the same position.

 

 TweenMax.to("#d1", 1, {x:350,y:50})

 TweenMax.to("#d2", 1, {x:350,y:50})

 

This moves it relative to the starting position.

 

I'm sure its simple, but I seem to be missing something. The only way I can think to do it is to use the starting as an offset to the final position, which seems a bit of over kill.

 

Any help much appreciated.

 

Thanks

 

Metapod

[GreenSock 8,117 Likes (Superhero)]

You could definitely do it by setting position:absolute on both of them, but then you lose the document flow which you may not like. 

 

It's actually a pretty complex thing to accomplish especially when you have to factor in transforms, like what if element1 is inside a rotated and scaled element too, but element 2 isn't? 

 

I haven't seen any tools that do that well, so I'm building one. It likely won't be released for another month at least, though. It'll make this sort of thing REALLY easy. 

 

For now, though, you could use jQuery's offset() method and use top/left instead of x/y. Here's a forked codepen: http://codepen.io/GreenSock/pen/d5c38df381ca5132f126c526c4d7471b/

 

Notice I had to set position:relative on the elements you're animating, otherwise top/left won't do anything. 

[Metapod 0 Likes (Newbie)]

That's great

 

Thanks Jack.

 

I have forked the original here to include a reset button, and set the x and y position seperatky to the the offset object.. This allows the reset to go back to the original position if needed.

 

See the Pen aIyCn by anon (@anon) on CodePen

 

Hope it helps someone else.

 

Thanks