Can the method 'to' handle a 'function property'

[xipx]

Hi !

I'm new to GSAP,and I was reading this tutorial below

http://ahrengot.com/...ript-animation/

 

In the part 'Animating custom properties' ,seems like that it attempt to animate a property which is a function !?

 

I'm wondering how could this be possible?

 

By the way I tried this

obj = {};
obj.fn=function(v){ console.log(v) };
TweenLite.to(obj , 3, {fn:900});

and just got back a ton of 'NaN'

[jamiejefferson]

It's one of those hidden conveniences that Greensock provides, but it requires the object has both a getter and setter function, and the naming convention must be setvariable, getvariable (and refer to setvariable in your tween).

obj = {};
obj.v = 0;
obj.getfn=function(){ return obj.v; };
obj.setfn=function(v){ console.log(v); };
TweenLite.to(obj , 3, {setfn:900});

 

The reason it doesn't work without the set and get function names, is that Greensock needs to access the value to know what to tween to. Without, it will try to tween obj.fn from a function to a number, which is impossible. Greensock recognises the 'set' in the function name of your tween, and automatically looks for the corresponding 'get', so it can work out start and end values correctly.

 

I've made this into a small jsfiddle to show how this might be setup.

[Carl]

Hi Xipx,

 

Welcome to the GreenSock forums.

 

Yes, in the example you linked to its important to note that the author is using specific getter/setter methods each named

 

getTextVal() and setTextVal() respectively.

 

And the tween is using setTextVal as the property that is being tweened (but its really a function)

TweenLite.to(obj, 7, {setTextVal: endVal, ease: Power2.easeInOut});

 

When TweenLite senses a property name that uses "set" it also looks for a corresponding "get" function in order to retrieve the proper starting value.

 

If you don't want to use independent get/set functions you can create your own that look like this:

 

 

var obj1 = {
   _height: 0,
   height: function(val) {
       if (arguments.length === 0) {
           //get
           return this._height;
       } else {
           //set
           this._height = val
       }
   }
};

//tween the height() 

TweenLite.to(obj1, .5, { height: 150 });​

 

Here is a fiddle of obj1's height() being tweened: http://jsfiddle.net/geekambassador/aNmfJ/