GSAP Draggable X and Y coords

[Guest]

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

[Guest]

I figured out the problem and the issue is closed.

[OSUblake]

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.

[Guest]

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

 

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