Jump to content
Search Community

Set Position Of Element

Metapod test
Moderator Tag

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 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.
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.



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.
  • Create New...