Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axelstudios

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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});
});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi

 

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

 

Cheers

Rodrigo

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×