Tween the properties of an object of an object in an array?

[axelstudios]

Hi - I've recently started using gsap (very pleased so far), and I wanted to know if there is a simple way of simultaneously tweening multiple properties of an object of an object within an array, all without using a foreach loop?

 

This is the code before adding the tween:

var spheres = [sphere1, sphere2, ..., spherex];

$.each(spheres, function (i, sphere) {
    sphere.scale.x = value;
    sphere.scale.y = value;
});

And this is the working code I've got so far.  But I'd like to be able to do the same thing without the loop, if possible:

$.each(spheres, function (i, sphere) {
    TweenLite.to(sphere.scale, 1, {x: value, y: value, ease:Quad.easeInOut});
});

[Rodrigo]

Hi

 

Of course you can, but instead of passing the object property pass just the object, and in the vars you pass the property, like this:

 

$.each(spheres, function (i, sphere) {

TweenLite.to(sphere, 1, {scale.x: value, scale.y: value, ease:Quad.easeInOut});

});

 

Sorry that I can't supply a live sample, try that and let us know how it went.

 

Hope this helps

Cheers

Rodrigo

[axelstudios]

Unfortunately, that results in a syntax error: "Uncaught SyntaxError: Unexpected token ."

[Rodrigo]

Hi

 

Try with the following

 

$.each(spheres, function (i, sphere) {

TweenLite.to(spheres.sphere, 1, {scale.x: value, scale.y: value, ease:Quad.easeInOut});

});

 

Again sorry for not setting a live sample. You could look in w3schools or Mozilla development for some working code sample for arrays and objects.

 

Let me know how this works.

 

Cheers

Rodrigo

[axelstudios]

Same problem; the issue is in the TweenLite vars parameter.  JavaScript doesn't allow "scale.x" or "scale.y" as object keys.

 

Seems like it should be:

TweenLite.to(spheres, 1, {scale: {x: value, y: value}, ease:Quad.easeInOut});

but it doesn't seem to look in nested objects for parameters to modify.

[Rodrigo]

Hi

 

Give me a little more than an hour to correct this, currently posting from ky phone.

 

Cheers

Rodrigo

[Rodrigo]

Hi,

 

One question, how are you defining the object of the object?, I mean how and where are you defining scale and it's key:value pair (x:value, y:value)?

 

In the code you posted, at least, is not showing, I was wondering if you're defining those values, anyway the thing is as follow.

 

GSAP can't tween scale.x what it tweens is the property x of scale, which is a property of sphere[n], that's the unexpected token error you were getting; for example when  you're tweening the height value of a DIV element you don't pass the following code:

TweenMax.to(element, time, {element.height:value});

That should give you the same error, the fact is that even with scale being a property of each sphere, is an object, just like sphere (and for that matter EVERYTHING in javascript is an object), so you have to pass the property of that object to the engine to get it to work, like this:

var spheres = ['sphere1','sphere2','sphere3','sphere4','sphere5'];

$.each(spheres, function(index,sphere)
{
    spheres[index] = {'scale':{x:0, y:0}};
    TweenMax.to(spheres[index].scale, 1, {x:2, y:2, onComplete:complete, onCompleteParams:[index]});
});

function complete(index)
{
	var element = spheres[index];
	console.log(element.scale.x);
}

Note that the scale property/object is being defined inside the loop and then it's x and y properties are tweened.

 

Well I hope this time the issue get's solved.

 

Cheers,

Rodrigo.