Jump to content
Search Community

Proper get() method instead of _gsTransform hack?

KokoDoko test
Moderator Tag

Go to solution Solved by OSUblake,

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

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

  • Solution

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

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.
×
×
  • Create New...