Jump to content
Search Community

Tween to x,y coordinate?

rlaurencelle test
Moderator Tag

Go to solution Solved by Dipscom,

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

What math?

TweenLite.to(foo, 1, { x: 13, y: 45 });

That's assuming you're talking about transforms that started from an origin of 0,0. If you meant something else, please make a demo. Coordinates can have a lot of different meanings depending on the context, screen position, absolute position, relative position, offset, etc.

Link to comment
Share on other sites

See the Pen pegKZV by rlaurencelle (@rlaurencelle) on CodePen


In my example I have an object located at 300,200 within a container div.  If I wanted to tween it to X,Y coordinate 25, 25 I would have to calculate the difference between the current coordinate and the target coordinate and use the result in tween code.  I have many objects and it would take time to do this.  I was wondering if GSAP has a method that does this for you automatically - so you can simply provide the target coordinates and GSAP will do the rest?  In effect, tell the object to go to the specified location instead of the using x: and y: to tell it how far it should move to get there. 

Link to comment
Share on other sites

  • Solution

Left and Top are not the same thing as X and Y


X,Y are an alias to the translate() transform. So, if you are setting you element at left:300, top:200, it is effectively sitting at x:0, y:0 (in the CSS lingo, transform: translate(0,0); )


To achieve what you are after you can leave all your starting objects at left:0, top:0 and place them where you want using GSAP, then you can use absolute x and y.


Like so: 

See the Pen BWKvJb?editors=0110 by dipscom (@dipscom) on CodePen

  • Like 6
Link to comment
Share on other sites

Where is coordinate 25, 25? The top-left corner of the screen? The top-left corner of the page? The outside top-left corner of the container? The inside top-left corner of the container if there are borders? There's a lot of variables to consider.


So no, there is no built-in support for this. What Dipscom did is what I would do. Have everything start from the same origin with left and top set to 0, and then transform everything. That will eliminate the math, and make everything really simple.

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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