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

# GSAP Draggable X and Y coords

## Recommended Posts

I'm new to GSAP.

I'm learning to work with the Draggable plugin. I can't understand the principle of the x and y properties of the Draggable plugin.

I gave an example on Codepen to illustrate.

Why when you click on the element block in the console returns a 0 value on the X-axis and the Y-axis?

Because this unit is set to 20 on both axes.

How is the calculation of the coordinates for this block?

See the Pen GNryKE by gearmobile (@gearmobile) on CodePen

##### Share on other sites

I figured out the problem and the issue is closed.

##### Share on other sites

So you're good? Understanding how coordinates are calculated in the DOM is an incredibly difficult topic, and there's a bunch of quirks that can trip you up. Here's a post I just made about coordinates.

http://greensock.com/forums/topic/15440-trigger-animation-on-view/?p=67200

Check out the values being reported in that demo...

See the Pen 85e021b3614193158e4efad0c082443a?editors=0011 by osublake (@osublake) on CodePen

I moved the box to 200,100, but one calculation shows it at 0,0, while the other shows it at x=215 y=115. So that little change in position has created 3 different sets of coordinates.

The best way to think of x,y values on a draggable is that those coordinates will be it's relative position, i.e. how much you have moved it from its starting position.

• 2
##### Share on other sites

The best way to think of x,y values on a draggable is that those coordinates will be it's relative position, i.e. how much you have moved it from its starting position.

yeah, I just thought of this a few minutes ago ))

but - thanks for the great links! in these references I found a new and unknown moments for myself.

really - the subject is quite complex. i need to understand and imagine in my head ))

See the Pen GNryKE by gearmobile (@gearmobile) on CodePen

- converted this example as a little visual aid. ))

I am now studying a complete example of a game on GSAP, and it has similar calculations of the coordinates of the elements.

thank you very much for the help! ))

P.S.

GSAP is a surprisingly interesting and beautiful thing! )

• 2