Proper get() method instead of _gsTransform hack?

[KokoDoko]

I am looking for a way to know the current position of a x,y tween. I am using the css plugin to move DOM elements around the screen. I'm not sure if I am overlooking something. I have searched the forums and documentation, and all I could find was the tip to hack a secretly hidden property of a tweened element:

 

_gsTransform

 

My question: is there no official way to get the x and y properties? Is this secret hack the only way? It seems a bit hacky to me, and it doesn't result in clean code.

 

TweenLite.get() would be great!

 

btw, this problem gets worse when you use typescript, since the typescript definition file does not include _gsTransform.

In typescript, you will get this error when you try to read _gsTransform:

 

let x = this.element._gsTransform.x

// error: htmlElement has no property _gsTransform

 

Of course, I can add _gsTransform manually, but that's even more hacky.

[OSUblake]

That is the official way. 

 

You can write your own function to return it. Or you could keep a reference to it as it's an object. Just set a transform on your element first to get GSAP to initialize the object.

TweenLite.set(element, { x: "+=0" });
var transform = element._gsTransform;

// Now you can access it like this
var x = transform.x;

Those TypeScript definitions are missing a lot things. If you run into problems with them just ask me. I know everything this is wrong with them. 

 

Add this to your code and you should be good. 

interface Transform {
  force3D: boolean|string;
  perspective: number;
  rotation: number;
  rotationX: number;
  rotationY: number;
  scaleX: number;
  scaleY: number;
  scaleZ: number;
  skewType: string;
  skewX: number;
  skewY: number;
  svg: boolean;
  x: number;
  y: number;
  z: number;
  xOffset: number;
  yOffset: number;
  xPercent: number;
  yPercent: number;
  zOrigin: number;
}

interface Element {
  _gsTransform: Transform;
}

[OSUblake]

BTW, here's what I do for my classes if I'm going to be accessing x,y a lot.

class Foo {
	
  transform: Transform;
	
  constructor(public element: HTMLElement) {

    TweenLite.set(element, { x: "+=0" });
    this.transform = element._gsTransform;
  }
	
  get x(): number|string { return this.transform.x; }
  set x(x: number|string) { TweenLite.set(this.element, { x }); }
	
  get y(): number|string { return this.transform.y; }
  set y(y: number|string) { TweenLite.set(this.element, { y }); }
}

The number|string type is like that because you can set x using foo.x = "+=100", which is a string, and getters/setters have to be same type.

[OSUblake]

@Jack, I just noticed the xOffset/yOffset properties. Has that always been there? And what is for?

[GreenSock]

@OSUblake, the xOffset and yOffset are what make the whole smoothOrigin functionality possible. http://greensock.com/svg-tips#smoothOrigin. Practically-speaking, they probably wouldn't be of much use to anyone to tap into directly. 

[KokoDoko]

Thanks, that's pretty neat! I was running into the wall on this one.