Search Community

Tween to x,y coordinate?

Moderator Tag

Go to solution Solved by Dipscom,

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.

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

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

• 4
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 on other sites

• 1 year later...

attr{x:10}