Help needed with simple animation [SOLVED]

[Andrija]

Hello everyone, I need small help with TweenLite. I'm trying to create animation on my MovieClip combining multiple TweenLite, but it doesn't behave as I hoped at start.

 

TweenLite.to( mc, 0, {x:119.5, y:609 , overwrite:false} );

TweenLite.to( mc, 3, {y:136 , overwrite:false} );

TweenLite.to( mc, 0, {width:0, height:0 , overwrite:false, immediateRender:false , delay:3});

TweenLite.to( mc, 8, {width:200, height:200 , overwrite:false, immediateRender:false , delay:3});

 

Idea was to move movieClip out of the screen ( Tween with 0 duration ) and then during 3 sec interval to move it in predefined position. After that moviClip will "grow" from w=0,h=0 to w=200,h=200.

 

Unfortunately it seams that leaving duration = 0, causes some problems, and mc after moving to position blinks, and start to change to w=200,h=200 from original size.

 

Can any one help me with this?

I tried to use TimelineLite, also to delay creation of TweenLite for defined delay ( emulating delay param passed to TweenLite)

 

Thanks

Andrija

[GreenSock]

I'd recommend altering your code to this:

 

mc.x = 119.5;
mc.y = 609;

var tl:TimelineLite = new TimelineLite();
tl.append( TweenLite.to( mc, 3, {y:136} ) );
tl.append( TweenLite.to( mc, 0.001, {width:0, height:0} ) );
tl.append( TweenLite.to( mc, 8, {width:200, height:200} ) );

 

The issue has to do with the fact that you had two tweens of the same object at exactly the same time (one with a zero duration and one with an 8 second duration). In order for overwriting to occur properly, tweens that are created LATER must technically be initialized FIRST in the rendering queue. So your zero-duration one was technically running immediately after the other one since they were right on top of each other. Notice I changed it from a zero duration to 0.001 seconds. You could offset the 2nd tween slightly if you prefer instead. Logically, there's no real way to have overwriting occur in the proper order AND accommodate tweens of the same object right on top of each other AND have things perform well. But hopefully you'll find this solution to be perfectly workable (it actually uses a bit less code than your original version anyway).

[Andrija]

Thanks very much for help, I will update code so there is overlapping in duration/delay as you suggested.

 

Sample that I posted was just a demo from bigger picture. I'm working on a product that converts/emulates whole PowerPoint animation model, and now I'm adjusting mine "old" property animation engine with TweenLite ( which is written very well ).

 

Thanks for help,

Andrija