Jump to content
GreenSock

rlaurencelle

Tween to x,y coordinate?

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

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. 

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

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

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.

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