Jump to content
GreenSock

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

Getting Local Coordinates from a Transformed Element

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

Hi there,

 

it must be something really simple but I can't find it in the docs:

 

how does one get local coordinates of a specific point in an element after it has been transformed?

 

For example, if user clicks on a div that has been rotated 45 degrees, how do I get the transformed coordinates of the mouse click in the div?

 

Please have a look at this codepen: https://codepen.io/anon/pen/BoXpKB

 

It works as this:

  1. Click on the top left corner of the box.
  2. Local coordinate values will appear in it.
  3. Rotate the box 90 degrees clockwise.
  4. Click the same corner, which should be top right now.
  5. The value presented appears to be not transformed.

I would expect the the returned value to be similar to the one received in the step 3. Not getting the transformed value makes it difficult to insert elements into containers at a specific location. It is especially the case when one is working with a huge scrollable container with only a fraction of it area visible.

Share this post


Link to post
Share on other sites

Hi Yuri  :) 

 

your code is to calculating x,y base of div position ( pls change Draggable type to 'x,y' ) , for rotated divs you can use trigonometry .

 

edit : Blake is completely right .

  • Like 1

Share this post


Link to post
Share on other sites

You can use event offset or layer. You might need to check browser compatibility for those though.

 

See the Pen bVXrEW?editors=001 by osublake (@osublake) on CodePen

 

Hi Blake, this indeed is a very clean solution.

 

Would there be a way to transpose a set of any document coordinates to local ones, not only those produced by mouse clicks?

Share this post


Link to post
Share on other sites

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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×