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

http://codepen.io/rlaurencelle/pen/pegKZV

 

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: http://codepen.io/dipscom/pen/BWKvJb?editors=0110

  • 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

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.