Jump to content

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

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