Jump to content
GreenSock

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

Proper get() method instead of _gsTransform hack?

Recommended Posts

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.

Link to comment
Share on other sites

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;
}
  • Like 4
Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×