Deep properties support plugin

[dblaise]

Hi there,

 

I'm trying to find a solution to have GSAP support deep properties (typically only one level). The reason for this is my application compiles transitions and modifies properties across a number of packages. I'm often doing something like this:

 

TweenMax.to(target, 5, { position: { x: 500 } });

 

Out of the box GSAP doesn't support deep properties so I was wondering if there was a plugin or preferred method to accomplish this. Specifying the property directly using:

 

TweenMax.to(target.position, 5, { x: 500 });

 

Will really limit what I'm trying to accomplish. Is this done to mitigate performance issues with deeply nested properties?

 

Thanks!

 

[Carl]

Yes, out of the box, a tween will handle animating multiple properties of a single object.

 

So doing this: TweenMax.to(target.position, 5, { x: 500, y:500 }); is perfectly fine. 

 

If your properties are complex objects with their own properties and values, then you can create your own PositionPlugin using the instructions here:

 

http://api.greensock.com/js/com/greensock/plugins/TweenPlugin.html

 

However, its fairly straight-forward to tween a function-based value on the target that will act as a getter/setter for position.x

var message = document.getElementById("message");

var obj1 = {
    position: {x:0, y:0},
    positionX: function(val) {
        if (arguments.length === 0) {
            //get
            return this.position.x;
        } else {
            //set
            this.position.x = val
        }
    }
};
//tween the position.x 
TweenLite.to(obj1, 2, {positionX:200, onUpdate:function() {
  message.innerHTML = obj1.position.x
}});

http://codepen.io/GreenSock/pen/3236625f134a45abcea513b14447b2b7