2 x tweens using timeline problem [SOLVED]

[iugo]

Im trying to tween a set of thumbnails twice... the first tween works just fine (thumbLoader loads 9 different thumbnails)

 

First tween works fine:

 timeline.append(TweenMax.to(thumbLoader, 1.12, {bezier:[{x:10, y:361}, {x:(thumbWidth + 5) * xCounter, y:(thumbHeight + 5) * yCounter, alpha:1}], scaleY:0.5, scaleX:0.5, ease:Quad.easeOut}), -1); 

 

Once the tween ends, I would like all the thumbnails to do another tween, however, it just doesnt seems to be working:

 

2nd tween not working:

timeline.append(TweenMax.to(thumbLoader, 0.5, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:1, scaleX:1, ease:Quad.easeOut}), 2);

 

What am I doing wrong here?

[Ahrengot]

Sorry, misunderstood your question and haven't found the delete post button on this forum yet

[GreenSock]

Please post an example FLA - It's tough to say what's going on by the very small piece of code you posted. Do you have another tween that's happening at the same time on the same object? If so, maybe you're running into an overwrite issue.

[iugo]

Hi, the full code is attached.

 

Basically, what im trying to achieve is - after this tween is complete

timeline.append(TweenMax.to(thumbLoader, 1.12, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:0.5, scaleX:0.5, ease:Quad.easeOut}), -1);

 

run this

timeline.append(TweenMax.to(thumbLoader, 0.5, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:1, scaleX:1, ease:Quad.easeOut}), 0.6);

or something similar.

 

Snippets of the function:

var timeline:TimelineMax = new TimelineMax();
	private function callThumbs():void {
		for (var i:Number = 0; i				var thumbURL = images[i].@THUMB;
			var thumbLoader = new Loader();
			thumbLoader.load(new URLRequest(thumbURL));
			thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
			thumbLoader.x = 300;
			thumbLoader.y = 700;
			thumbLoader.alpha = 0.5;

			timeline.append(TweenMax.to(thumbLoader, 1.12, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:0.5, scaleX:0.5, ease:Quad.easeOut}), -1);

			// Im trying to make the tween below to start only when the tween above (code above) completes
			timeline.append(TweenMax.to(thumbLoader, 0.5, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:1, scaleX:1, ease:Quad.easeOut}), 0.6);

			timeline.play();

			if (xCounter+1 <= columns) {
				xCounter++;
			} else {
				xCounter = 0;
				yCounter++;
			}
		}
	}

 

Apologies... Im still a noob at this.

[GreenSock]

I'm confused - that tween IS running after the other one which is what you said was your objective. You offset it by 0.6 seconds, though - are you asking how to get rid of the offset? Also, why did you make the first tween use a -1 offset? That is technically "illegal" because a timeline will always start at a time of 0 (it cannot start at a time of -1).

 

Again, help me see what's "broken" here.

[iugo]

Hi greensock. thanks for the reply!

 

First set of tween:

there are a total of 13 images in thumbloader. each image takes 1.12sec to perform the tween. Hence the reason why I offset it by -1 sec so that each will start to tween 0.12 right after the one before it starts. Im not sure if im doing it the right way. Hope the explanation is clear.

 

2nd set of tween

Yes, the 2nd tween is running, but I would like it to start tweening only after the first set of tween (all 13 images) have stop.

 

Im sorry if it all sound too confusing and f the code is messy... Im still trying and learning...

[GreenSock]

You could just create two separate TimelineLites, one for the "in" animations and the other for the "out". Populate them each during your loop, and then after you're done, set the "out" TimelineLite's delay to equal the "in" TimelineLite's duration. That way, the "out" will start right after the "in". Here's the corrected callThumbs() method:

 

private function callThumbs():void {
var tlIn:TimelineLite = new TimelineLite();
var tlOut:TimelineLite = new TimelineLite();

for (var i:Number = 0; i		var thumbURL = images[i].@THUMB;
	var thumbLoader = new Loader();
	thumbLoader.load(new URLRequest(thumbURL));
	thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
	thumbLoader.x = 300;
	thumbLoader.y = 700;
	thumbLoader.alpha = 0.5;

	tlIn.insert( TweenMax.to(thumbLoader, 1.12, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:0.5, scaleX:0.5, ease:Quad.easeOut}), i);

	// Im trying to make the tween below to start only when the tween above (code above) completes
	tlOut.insert( TweenMax.to(thumbLoader, 0.5, {bezier:[{x:10, y:361}, {x:(thumbWidth + 10) * xCounter, y:(thumbHeight + 10) * yCounter, alpha:1}], scaleY:1, scaleX:1, ease:Quad.easeOut}), i);

	if (xCounter+1 			xCounter++;
	} else {
		xCounter = 0;
		yCounter++;
	}
}

tlOut.delay = tlIn.duration;
}

[iugo]

Brilliant! thank you! thank you! thank you!