Jump to content
Search Community

tweens not playing after timeline restart

kimtasker test
Moderator Tag

Recommended Posts

Hello all !


I'm new to the greensock API, and therefore also new to the forum !

Well, first of all, I'd like to congratulate for the great job, the APIs are awesome !

I'm also just getting started in AS3, as I've always been using AS2 so far, but that's another subject...


After a couple days, I think I'm aleady getting things to work nicely, so I'm pretty pleased with the quality of the platform, it makes AS3 look easy !


I got a nice animation playing, with tweens nested in timelines, all nested in one master timeline, I named masterTimeline. In the end, a button allows to restart the animation, so it triggers masterTimeline.restart()

The thing is, some of the tweens don't play. I'm really puzzled by the following :

//sequence 1
var barongteterot1:TimelineLite = new TimelineLite();
barongteterot1.append(new TweenLite(barong, 0.9, {rotation:-30, ease: Linear.easeOut})); //rotate
barongteterot1.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut})); //rotate back
   new TweenLite(barong, 1.8, {x:-30, y:145, ease: Quad.easeInOut}),
   new TweenLite(barong, 1.8, {scaleX:0.6, scaleY:0.6, ease: Linear.easeOut}),

//sequence 2
var barongteterot2:TimelineLite = new TimelineLite();
barongteterot2.append(new TweenLite(barong, 0.9, {rotation:30, ease: Linear.easeOut}));
barongteterot2.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut}));
   new TweenLite(barong, 1.8, {x:470, y:125, ease: Quad.easeInOut, onComplete:swapDepth, onCompleteParams:[0]}),
   new TweenLite(barong, 1.8, {scaleX:0.2, scaleY:0.2, ease: Linear.easeOut}),

//sequence 3
var barongteterot3:TimelineLite = new TimelineLite();
barongteterot3.append(new TweenLite(barong, 0.4, {rotation:-30, ease: Linear.easeOut}));
barongteterot3.append(new TweenLite(barong, 0.4, {rotation:0, ease: Linear.easeOut}));
   new TweenLite(barong, 0.8, {x:250, y:255, ease: Expo.easeIn}),
   new TweenLite(barong, 0.8, {scaleX:0.05, scaleY:0.05, ease: Linear.easeOut}),


it plays perfectly, but when I restart the masterTimeline, the "rotate back" in sequence 1 won't play !!

it's really puzzling as sequence 2 and 3 are constructed in the same way and have no problem what so ever !

I managed a work around, triggering the rotate back in a function called with onComplete, but I'd really like to understand, mostly.


maybe other parts of my code are interfering (although I doubt it), but if anyone has an idea of what's happening here, I'd appreciate an explanation or any lead to a start of an explanation.


Cheers all !


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry to hear you've hit a little bump. Don't worry, we're here to help.


From the code you posted nothing jumped out at me as the cause of the problem


Usually when a timeline plays fine once, but doesn't play again or reverse properly its because 2 tweens on the same properties of the same object overlapped and one of the tweens got killed (eliminated) in the process. 


From my understanding all the rotation tweens on barong should be happening at totally different times so I don't think that is the case.


If you remove sequence 2 and sequence 3 does the issue persist?


It would be very helpful if you could provide a simple fla with just enough code and assets to replicate the problem. Basically make a copy of your file and strip out everything that isn't necessary to replicate the issue. This was we can quickly test and asses what the issue might be.


You can post your fla as a zip using the "more reply options" button.


We'll gladly take a look and help you figure out what the issue is.

Link to comment
Share on other sites

Thanx for the fast reply !


I was actually stripping out all the unnecessary stuff, as you suggested, to test the animation with just the minimum - as I had added the restart feature only once I got the whole sequence together.


So, I still have the issue, but then I tried removing sequence 2 and 3, and yes, the problem disappeared ! So I guess there is some kind of conflict in the tweens and one gets killed, as you mentioned...


I'm preparing the .fla to show you, but I need to get rid of a great deal of graphics to get it under 500k.

Link to comment
Share on other sites

Sorry for the delay. Your file actually helped us discover a problem in flash player where numbers could possibly be rounded incorrectly causing some Tweens to overlap and thus overwrite each other.


We have updated TweenLite to account for this.


Please grab the latest version using the getGSAP button above.


Let us know if you still experience this problem. Again, sorry for the delay.

Link to comment
Share on other sites

Wow ! you rock ! thank you so much !


I'm relieved it was something to do with the flash player - rather than me not understanding the GSAP api and gratefull you managed to fix it !

well done guys, your update solved the problem alright, and you were really quick at it too, so the delay isn't even an issue !


ok, so I have a new question now, sorry if I'm bothering :

I often "initialize" stuff before I start a tween in my sequences, as in the example below


new TweenLite(bebey, 0, {alpha:1, immediateRender:false}),
new TweenLite(palmier, 0, {alpha:0, immediateRender:false}),
new TweenLite(scene, 0, {scaleX:4.2, scaleY:4.2, x:-2300, y:-1000, immediateRender:false})
new TweenLite(scene, 2.5, {scaleX:1.8 ,scaleY:1.8, x:-600, y:-450}),
new TweenLite(bebey, 1.25, {x:450, ease:Quad.easeIn, delay:1}),
new TweenLite(scene.bg, 1.5, {x:100, ease:Linear, delay:1.8})

I get some problems on replay here as well, do you think the inits using tweens with 0 duration may be interfering here ?

Link to comment
Share on other sites

Since your first batch of tweens have no duration and they are added a time of 0, your timeline has no duration.


The second batch of tweens also gets added a time of 0. So you literally have multiple tweens starting at the same time. This isn't necessarily bad, unless multiple tweens are trying to control the same properties of the same object.


I can see that the tweens on scene might be causing problems because they both effect scaleX, scaleY, x and y. I would assume the second tween overwrites the first one.


You should look into using fromTo() tweens for this

TweenLite.fromTo(scene, 1.25, {scaleX:4.2, scaleY:4.2, x:-2300, y:-1000}, {scaleX:1.8 ,scaleY:1.8, x:-600, y:-450});
Link to comment
Share on other sites

Nice ! Thanks again Carl !
I solved most of my problems using fromtTo(), I don't know why, but I thought it was a tweenMax method exclusively.
I'm almost done now, but I have one last issue with overlapping tweens
TweenLite.fromTo(lolo, 3.3, {x:-263}, {x:250, ease:Bounce.easeOut}),
TweenLite.fromTo(bebey, 3.3, {x:800}, {x:350, ease:Bounce.easeOut})
new TweenLite(lolo, 0.2 , {x:400, y:500, scaleX:0, scaleY:0, ease:Quad.easeOut}),
new TweenLite(bebey, 0.2 , {x:400, y:500, scaleX:0, scaleY:0, ease:Quad.easeOut})
First play works perfectly, but on replay my first set of tweens gets killed.
I'd really like the second set of tweens to start before the end of the "Bounce" - I actually only want 1 bounce - thus I insert it before the first set is ended.
I'm wondering if there's some kind of work around for this...

The only way I can think of is to artificially recreate the "bounce" effect in a perfectly sequenced set of tweens, with no overlapping in the end.

Link to comment
Share on other sites

Yeah, in that last example its clearly an overwrite issue. I think for the effect you want your best bet is to sequence the bounce with a series of individual tweens.


Also, fromTo() was added to TweenLite in v12, you're not crazy or antyhing;)


Also, since you seem to be very fond of TimelineLite/Max you might want to read up on some of the API advancements. In short, you can get the same effects with much less code.


Read this article which compares the new way vs the old way of adding tweens:



Also read about TimelineLite's to() and add() methods in the docs. You'll see that add() can work exactly like insertMultiple() and appendMultiple().

Its probably a good idea to look over all the TimelineLite/Max methods. I think you will find some real time-saving methods in there.


This video also does wonders to show new ways of positioning tweens in a timeline




Again, you're not doing anything wrong in your code, but moving forward I think you will find things much easier with the new methods.

Link to comment
Share on other sites

So I reproduced the bounce effect - or something similar - with a series of individual tweens, as suggested, and I am quite pleased with the result. Thank you so much for your help with this project I've been working on.


I thought you might be interested in the final result, so here's a demo

You'll notice I also got LoaderMax in there with no problem at all.


Thanks also for the additional info, I'll try using those advancements in the future.

This was the first time I use GSAP for animation, so I wasn't aware of all the features. No doubt I'll continue using it !

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.
  • Create New...