Greensock and Pixi, tweening multiple properties at once

[Yourangutan]

Hi everyone,

 

I've been reading through the posts here and on the greensock forums, and managed to make tweening text work a little but I'm not entirely sure how to stop stumbling.

 

So far I've learned you need to add .position to the object you're tweening if you want to tween, like so

TweenMax.to(textBox.position, 0, {x:300 , y:100});

or add .scale, like so, if you're scaling:

 

TweenMax.to(textBox.scale, 3, {scaleX:0.5, scaleY:0.5});

But how would I go about tweening multiple properties at once? Say Im interested in using the full range of greensock (i.e. alpha, rotation, width, height, the text plugins, etc) simultaneously, just for the hell of it.. would such a thing be possible?

 

Im also thinking, maybe it's a question of how Im attaching the text .. should I be doing it like this?

var textBox = new PIXI.Text();var text = new PIXI.Text("MacBeth", {font: "36px Arial", fill: "#ffffff", align: "center"});textBox.addChild(text);stage.addChild(textBox);

...or should I be using a movieclip, or a DisplayObjectContainer, or something other than the text object? The text tended to blur when it scaled, the way I had it working earlier, right now I tried fixing it to the point where I don't remember the code when it was working halfway.

Any help would be much appreciated. 

 

 

 

[DennisSmolek]

I'm not 100% but I don't think you have to call out the individual properties like that, instead you can just reference the object and use dot notation to get to the property you want to tween:

TweenMax.to(textBox, 0, {position.x:300 , position.y:100, scale.scaleX:0.5, scale.scaleY:0.5});

You can also chain your events using timeline instead of tween:

var animation = new TimelineLite()animation.to(textBox, 3, {scale:1.5, ease:Linear.easeNone})             .to(textBox, 3, {opacity:1, ease:Linear.easeNone});

See: http://greensock.com/forums/topic/8109-chaining-instance-of-multiple-tweens/

[agamemnus]

This is tweening two properties at once already:

TweenMax.to (textBox.scale, 3, {scaleX: 0.5, scaleY: 0.5})

By the way, consider using the "css" object for css. This will avoid potential namespace collisions between object properties and CSS properties:

TweenMax.to (textBox.scale, 3, scaleX: .5, scaleY: .5, {css: {scaleX: 0.5, scaleY: 0.5}})

[Yourangutan]

Hi, it won't do scale and alpha and position at once, though, sadly. Or.. wait..trying sthing

 

 

edit: Nope.. Im thankful for your replies dudes, but strangely, none of your replies work.  Do these things work for you? Cuz then my troubles stem from some other reason.

[digibo]

Unfortunately, there are no separate scaleX/scaleY properties in PIXI, which makes animating with TweenMax slightly trickier, but not much.

 

For the position, you have x/y properties directly which I believe are getter/setters for position.x/y, so you can directly do this:

new TimelineMax().to(textBox, 3, { x: 150, y: 150 });

When I want to animate the scale.x/y at the same time, I usually do this:

new TimelineMax().to(textBox, 3, { x: 150, y: 150 })                 .to(textBox.scale, 3, { x: 0.5, y: 0.5 }, "-=3");

By default, chaining this way plays the animations consecutively, but the last parameter of the second tween puts it at 3 seconds before the end of the timeline, so the two happen at the same time.

 

This article helped me a lot to understand how the Timeline works.