TimelineMax sequence

[cas 0 Likes (Newbie)]

Hi,

 

I'm trying to run a sequence with multiple objects using a single TimelineMax instance, then moving between different labels on the timeline. Mostly this works well, but if I add another object to the sequence,  with a delay, going to the specified time doesn't reset the objects properly. E.g.

 

tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), 0);

tl.insert(TweenMax.to(obj1, 1, {x:200, y:100, delay:1}), 0);

 

//At this point tl.gotoAndStop(0) will reset the animation fine.

 

if I add a tween of another object to the timeline, which has a delay also, then tl.gotoAndStop(0) doesn't work.

 

E.g.

 

tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}, 0));

 

Without the delay parameter, the timeline will reset itself fine if I call tl.gotoAndStop(0). Is there a bug in TimelineMax, or have I done something wrong?

[Carl 11,326 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

There is an error in the code you provided

 

tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}, 0));

should be

tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), 0);

 

 

please fix that and test. 

 

A few things.

 

When using insert() you don't need to specify a timeOrLabel parameter of 0, as that is the default.

//timeOrLabel paramter = 0
tl.insert(TweenMax.to(obj1, 1, {x:200, y:200, delay:1}), 0);
//is the same as
tl.insert(TweenMax.to(obj1, 1, {x:200, y:200, delay:1}))

When using insert() you don't need to use a delay, if you are using the timeOrLabel parameter

tl.insert(TweenMax.to(obj1, 1, {x:200, y:200, delay:1}), 0);
//can be achieved with less code using timeOrlabel = 1
tl.insert(TweenMax.to(obj1, 1, {x:200, y:200}), 1);

Regardless, what you were doing should work (assuming you fixed the error above)

 

However it appears you are using a VERY old version of the platform (v11) which hasn't been updated in about 2 years. 

 

I made a very simple test of your "fixed" code with v11 and it worked fine. 

 

If you continue to have trouble, please provide a very simple test file zipped that we can test.

 

I used this code with no trouble (with and without delay)

 

import com.greensock.*;
import flash.events.MouseEvent;


var tl = new TimelineLite();
tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), 0);

tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), 0);


obj1.addEventListener(MouseEvent.CLICK, go)

function go(e:MouseEvent):void {
trace("go");
    tl.gotoAndStop(0); 
}

I would strongly suggest that you upgrade to v12 (if you haven't already) and get comfortable with the new features and syntax. It is MUCH better.

 

http://www.greensock.com/v12/

[Carl 11,326 Likes (Superhero)]

Just to show you, in v12 this code

var tl = new TimelineLite();
tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), 0);
tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), 0);

can be reduced to:

var tl = new TimelineLite();
tl.to(obj1, 1, {x:100, y:100})
  .to(obj2, 1, {x:200, y:200}); 

[cas 0 Likes (Newbie)]

Hi Carl,

 

The syntax error was me typing the code out by hand!!!

 

The code I'm using is actually part of a complex application which is using XML/JSON to build dynamic animation sequences and inject them into a single timeline in a for loop, giving me a series of animations that I can navigate between. As I add each sequence, I'm adding up the total time myself and storing it in a var called currDuration. That's why I'm using the delay parameter. This works great by the way. The only issue I have had is that when I run 2 objects with a delay, calling tl.gotoAndStop doesn't change anything back, but if I only use one, it works great which is why I thought it might be a bug. So

 

var currDuration:Number = 0;

var tl = new TimelineLite();
tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), currDuration);
tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), currDuration);

 

works when I call tl.gotoAndStop(0); but

 

var currDuration:Number = 0;

var tl = new TimelineLite();
tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), currDuration);

tl.insert(TweenMax.to(obj1, 1, {x:150, y:150, delay:1}), currDuration);
tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), currDuration);

 

doesn't. I should definitely look at v12 though.

 

Thanks for taking the time to respond.

[cas 0 Likes (Newbie)]

I just double-checked, I'm using v12.1

[Carl 11,326 Likes (Superhero)]

sorry, i can't reproduce the problem with the code you provided.

attached is my fla, obj1 is purple. clicking on it will reset the timeline.

 

it was made with Flash CC 2014, in case you can't open it, below is the code. All you need is obj1 and obj2 on stage. 

 

import com.greensock.*;
import flash.events.MouseEvent;


var currDuration:Number = 0;
var tl = new TimelineLite();
tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), currDuration);
tl.insert(TweenMax.to(obj1, 1, {x:150, y:150, delay:1}), currDuration);
tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}), currDuration);
tl.timeScale(0.5);
obj1.addEventListener(MouseEvent.CLICK, go)


function go(e:MouseEvent):void {
trace("go");
    tl.gotoAndStop(0);
}


trace(TweenLite.version);//12.1.4

timeline.zip

[cas 0 Likes (Newbie)]

Hi Carl,

 

Thanks for looking. Gotta admit I'm on here in desperation as it's been driving me nuts for a week. I rebuild a SWF just as you did, and no issue. I think it may be an unreported error somewhere else in the code.

 

Cheers

 

Chris