Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rlaurencelle

Tween to x,y coordinate?

Recommended Posts

Is it possible to tween an object to a target coordinate?  For example, my object is at x;50, y:50. I want to tween from this location to x:13, y:45 without having to do the math. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

25,25 is the top left corner of the container as in my example.  I tried Dipscom's suggestion and it worked.  Thank you all.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×