gsap.getProperty not working as I expected

[summer9844]

I have a 9x9 table with each td having a unique id. How can I get the x and y position of each td? Can I use gsap.getProperty for this? I have tried using the following code but the x and y positions returned are 0 and 0?

 

this.grid[x][y].xPos = gsap.getProperty("#" + "gridBoxId-" + x + "-" + y, "x");
this.grid[x][y].yPos = gsap.getProperty("#" + "gridBoxId-" + x + "-" + y, "y");

I am looping through the grid to add the x and y coordinates to each grid object, but it isn't working as I expected?

[Rodrigo]

Hi @summer9844 and welcome to the GreenSock forums!

 

The thing here is not the getProperty method but the fact that when first rendered the transform matrix of all DOM elements is the default one, where x, y and the rotations are zero and the scale is 1, that's why you're getting 0 for both values.

 

If you want to know the x and y position of each TD in the row you should explore offset top and left:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

 

Is worth noticing though that for the top or Y position it would be better to use the particular row and not the TD element since the position is relative to the nearest parent element so the offset top of every TD should be always zero. You'll have to test in order to see the results you get.

 

Hopefully this helps.

Happy Tweening!