Animate objects properties through catch all setter/getter functions

[RolandSoos]

I have an object which has a getter and a setter function. I would like to force GSAP to animate any unknown property through these getter/setter functions of the object. Is it possible?

 

I know GSAP can animate object's properties, but that means that the possible keys must be defined before GSAP can use it. What I want is similar how GSAP can animate any attribute names or CSS variables. 

 

Proxy might be the right solution, but maybe GSAP has such feature out of the box: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

 

Example:

The class itself does not specify its properties, it only defines that any unknow property start value is 0.

class HelloWorld{
  constructor(){
    this._abc = {
    }
  }
  
  getData(key){
    if(this._abc[key] === undefined){
      this._abc[key] = 0;
    }
    return this._abc[key];
  }
  
  setData(key, value){
    this._abc[key] = value;
  }
}

var obj = new HelloWorld;

gsap.to(obj, 0.4, {
  a: 5,
  k: 10,
  z: -5
});

[tailbreezy]

28 minutes ago, RolandSoos said:

The class itself does not specify its properties, it only defines that any unknow property start value is 0.

 

 

 

Not sure what you mean by "any". 

 

However, your code works as it is. You only have to pass in the actual obj from your constructor ( obj._abc )

 

gsap.to(obj._abc, 0.4, {
  a: 5,
  k: 10,
  z: -5,
  onUpdate() { console.log( obj._abc.a)}
});

 

 

[ZachSaucier]

@tailbreezy I think you missed the point of what this person is asking: "I would like to force GSAP to animate any unknown property through these getter/setter functions of the object. Is it possible?" Instead you're animating the properties directly, which is not what he's asking about.

 

@RolandSoos If you need to use getters and setters with undefined properties, using a proxy is the way to go. There is no other way to my knowledge to do it. Side note: I recommend using real getters and setters.

[RolandSoos]

15 hours ago, tailbreezy said:

 

 

Not sure what you mean by "any". 

 

However, your code works as it is. You only have to pass in the actual obj from your constructor ( obj._abc )

 

gsap.to(obj._abc, 0.4, {
  a: 5,
  k: 10,
  z: -5,
  onUpdate() { console.log( obj._abc.a)}
});

 

 

Thank you, but I think it is not the right solution for me. In this case GSAP alerts on the console that I use invalid property and your solution only works if the initial value is 0:

 

That would not work for this one:

class HelloWorld{
  constructor(){
    this._abc = {
    }
  }
  
  getData(key){
    if(this._abc[key] === undefined){
      this._abc[key] = 2;
    }
    return this._abc[key];
  }
  
  setData(key, value){
    this._abc[key] = value;
  }
}

var obj = new HelloWorld;

gsap.to(obj, 0.4, {
  a: 5,
  k: 10,
  z: -5
});

 

[RolandSoos]

15 hours ago, ZachSaucier said:

 

@RolandSoos If you need to use getters and setters with undefined properties, using a proxy is the way to go. There is no other way to my knowledge to do it. Side note: I recommend using real getters and setters.

I was able to find what I needed. I know how GSAP animates the attributes. If I made animated data to look like attributes for GSAP, then I can use the getAttribute/setAttribute methods of the object.

 

class HelloWorld {
  constructor() {
    this._abc = {};
  }

  getAttribute(key) {
    if (this._abc[key] === undefined) {
      this._abc[key] = 0;
    }
    return this._abc[key];
  }

  setAttribute(key, value) {
    this._abc[key] = value;
  }
}

var obj = new HelloWorld();

gsap.to(obj, 0.4, {
  attr: {
    a: 5,
    k: 10,
    z: -5
  },
  onUpdate() { console.log( obj._abc.a)}
});