Calling .to with vars having a property of set_x does not start with correct value

[remiX_ZA]

Hi,

 

I can't find much on recent posts on tweening with custom setters since gsap 3. I might be doing something really stupid or wrong but could use some help!

 

So I have a problem with trying to tween an object using a custom setter, given this example code:

 

var obj1 = {
  thing: 2,
  set_thing: function(val) {
    this.thing = val;
  },
  get_thing: function() {
    return this.thing;
  }
};

gsap.to(obj1, { set_thing: 5 });

On start, it appears to call set_thing(undefined) which causes the setter to set it to undefined if no undefined check is present.

It then continues to tween from 0 -> 5 instead of 2 -> 5.

You can see it in comparison on the code pen.

 

The real scenario and issue here is with gsap and haxe. haxe uses getters and setters with get_xx and set_xx for variables. These are then directly not usable unless you specify @:isVar which is not a requirement and would not like to be forced to do that.

 

So when trying to tween something with gsap in haxe code, I'd use{ set_xScale: 1.2 } for it to scale X var on the object from current (for eg, 1) to 1.2. But instead it tries to call the setter with an undefined value and sets it to undefined - which results it trying to tween from undefined to 1.2 and spazzes out.

 

Hope I've explained well enough!

 

Code Pen:

This is the console output from the code pen below, for quick viewing.

 

See the Pen poJLdVK by remiX_ZA (@remiX_ZA) on CodePen

[ZachSaucier]

Hey remiX_ZA. That's kind of annoying that haxe doesn't use real JS getters and setters. I wonder why they don't. 

 

Let's understand what's happening in your code (using a simplified version) according to how I understand it. Jack or Blake may come by and tell me that I'm flat out wrong  

var obj1 = {
  myVar: 3,
  set_myVar: function(val) {
    this.myVar = val;
  },
  get_myVar: function() {
    return this.myVar;
  },
}

gsap.to(obj1, {
    set_myVar: 10,
});

The first time the tween updates, it will look for a property of set_myVar on obj1. It will find a function and use the returned value as the first value of the tween. So since the set_myVar function doesn't return anything, its first value is undefined. GSAP then records an internal value of 0 since the initial value is undefined (it's a smart default in most cases). For future updates, it has the internal value to reference, so it updates it accordingly. 

 

In other words, GSAP has no way to know that this function is a setter for the myVar property so it uses a default value of 0. How could it know about that property?

 

With real getters and setters doing what you're attempting to do is straightforward: 

See the Pen 2861d5c51d92622b81ab268e7656993f?editors=0010 by osublake (@osublake) on CodePen

 

You could also use a function that is both a getter and a setter:

See the Pen 64913f1ea7154fe340abf33e7e3861e5?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thus in your situation, if you can't change it to use real getters and setters, you could create a handler function (similar to the demo right above this paragraph) and use that in your tween instead:

myVarHandler: function(val) {
  if (arguments.length) {
    this.set_myVar(val)
  }
  return this.get_myVar()
},

See the Pen MWwVQQp?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

@ZachSaucier is exactly right. I'd recommend using the single-method-as-getter-and-setter approach as Zach outlined. 👍

 

Does that clear things up for you? 

[remiX_ZA]

Quote

 That's kind of annoying that haxe doesn't use real JS getters and setters. I wonder why they don't. 

 

You can read more here. So in my use case, the getter and setter are wrapper functions which return values on an adapter variable.

Here's an example, maybe not the best but yea xD

 

Quote

... you could create a handler function  ...

 

So it's current usage with still using 1.20 but now after upgrading to 3 it is not happy

 

Was hoping it was backward compatible on this this part as this would require many extra functions on possibly many classes  

 

I'll give it a go and see how it is.

 

Thanks!