PROBLEM: Need to alter TweenMax element after it's been paused

[mandark]

THIS THING IS DRIVING ME MAD ..

 

PLEASE HELP !

 

var w = 25;

var timeline = new TimelineMax();

var mc1 = new TweenMax();
var mc2 = new TweenMax();

timeline.add( [   
mc1.to($('#selector'), 10, {backgroundColor:'red'}), 
mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }})
],0,0);

// so currently the animation pauses at 2.5 secs instead of 10
// how do i alter mc2's tween now that it has finished, with it staying in the same timeline
// I tried this .. (it doesnt work)

timeline.append( 
    mc2.updateTo($('#selector'), 5,  { width: "50%", onComplete: function(){ timeline.pause()} }, false) 
); 

 

 

[Carl]

You are placing both tweens at the same start time, 0 seconds. to have the second tween finish at the same time as the first 1

 

 

 

using add() with an array of tweens

 

 

 

tl.add([
TweenMax.to(mc, 10, {x:200}),
TweenMax.to(mc2, 2.5, {y:0})
], 8.5)
 

 

 

The second tween will start 8.5 seconds after the first tween

 

 

//generic example using to

 

tl.to(mc, 10, {x:200})
  .to(mc2, 2.5, {y:0}, "-=2.5") //add tween 2.5 seconds before the end of the timeline
 

 

 

 

[Rodrigo]

Hi,

 

You also have some syntax issues here too.

 

First once you have defined your tweens as variables in the add method you only put each variable name in the array, the DOM element and the variables to be tweened must go in the variable declaration, not in the add method array.

 

Wrong syntax:

var w = 25;

var mc1 = new TweenMax();
var mc2 = new TweenMax();

timeline.add( [   
mc1.to($('#selector'), 10, {backgroundColor:'red'}), 
mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }})
],0,0);

Wright syntax:

var w = 25;

var timeline = new TimelineMax();

var mc1 = new TweenMax.to($('#selector'), 10, {backgroundColor:'red'});
var mc2 = new TweenMax.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }});

timeline.add([mc1, mc2],0,0);

Second, in the update method you don't need to indicate the element and the time, only the vars to be changed. Also is not necessary to append, add or insert the update to the timeline, updateTo works as a function so you just use it on the variable you're updating.

 

Wrong:

timeline.append( 
    mc2.updateTo($('#selector'), 5,  { width: "50%", onComplete: function(){ timeline.pause()} }, false) 
);

Wright:

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

And finally from the api reference:

updateTo() is only meant for non-plugin values. It's much more complicated to dynamically update values that are being handled inside plugins - that is not what this method is intended to do.

That is why in the code above you'll see this:

 

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

 

Because since those values will be handled by the css plugin, and the tween has already started the tween element already has changed to that so the updateTo function it's going to look for width and is not going to find anything, but if you indicate that is a css plugin value  the function will look for css.width and will update the corresponding tween.

 

You can see the code working here:

http://jsfiddle.net/rhernando/Zx4Vr/2/

 

Hope this helps,

Cheers,

Rodrigo.

[mandark]

Hi,

 

You also have some syntax issues here too.

 

First once you have defined your tweens as variables in the add method you only put each variable name in the array, the DOM element and the variables to be tweened must go in the variable declaration, not in the add method array.

 

Wrong syntax:

var w = 25;

var mc1 = new TweenMax();
var mc2 = new TweenMax();

timeline.add( [   
mc1.to($('#selector'), 10, {backgroundColor:'red'}), 
mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }})
],0,0);

Wright syntax:

var w = 25;

var timeline = new TimelineMax();

var mc1 = new TweenMax.to($('#selector'), 10, {backgroundColor:'red'});
var mc2 = new TweenMax.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }});

timeline.add([mc1, mc2],0,0);

Second, in the update method you don't need to indicate the element and the time, only the vars to be changed. Also is not necessary to append, add or insert the update to the timeline, updateTo works as a function so you just use it on the variable you're updating.

 

Wrong:

timeline.append( 
    mc2.updateTo($('#selector'), 5,  { width: "50%", onComplete: function(){ timeline.pause()} }, false) 
);

 

Wright:

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

And finally from the api reference:

That is why in the code above you'll see this:

 

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

 

Because since those values will be handled by the css plugin, and the tween has already started the tween element already has changed to that so the updateTo function it's going to look for width and is not going to find anything, but if you indicate that is a css plugin value  the function will look for css.width and will update the corresponding tween.

 

You can see the code working here:

http://jsfiddle.net/rhernando/Zx4Vr/2/

 

Hope this helps,

Cheers,

Rodrigo.

Thanks Rodrigo,

 

This seemed to do the trick, however.. now when I pause the timeline, the longer tween continues to animate. Any idea why?

[Rodrigo]

Hi,

 

No problemo, glad that it worked.

 

Now regarding the tween keep going even when the timeline is paused, that's an odd behavior, if you check the fiddle you'll see that the background color change from blue to red stop at a purple shade meaning that the timeline is paused stopping all the tweens nested inside it, and if you comment the timeline.pause() line and put inside a console log you'll see the element color changing to red after 10 seconds and the console log triggering at 2.5 seconds, once the short tween has completed, something like this:

mc2.updateTo({css:{ width: "50%"}, onComplete: function()
                                                        {
                                                            /*timeline.pause();*/
                                                            console.log("foo bar");
                                                        }
             }, false);

You can see it here:

http://jsfiddle.net/rhernando/Zx4Vr/3/

 

Can you provide a simple example of your code?, in order to see what could be the problem.

 

Cheers,

Rodrigo.

[mandark]

Hi,

 

No problemo, glad that it worked.

 

Now regarding the tween keep going even when the timeline is paused, that's an odd behavior, if you check the fiddle you'll see that the background color change from blue to red stop at a purple shade meaning that the timeline is paused stopping all the tweens nested inside it, and if you comment the timeline.pause() line and put inside a console log you'll see the element color changing to red after 10 seconds and the console log triggering at 2.5 seconds, once the short tween has completed, something like this:

mc2.updateTo({css:{ width: "50%"}, onComplete: function()
                                                        {
                                                            /*timeline.pause();*/
                                                            console.log("foo bar");
                                                        }
             }, false);

You can see it here:

http://jsfiddle.net/rhernando/Zx4Vr/3/

 

Can you provide a simple example of your code?, in order to see what could be the problem.

 

Cheers,

Rodrigo.

 

I managed to get it working in the end, I just done it all in one timeline and added two nested timelines, one for the colour.. one for the width, and thanks to your post, didn't have any more trouble beyond that. 

 

A special thanks to everyone who helped, my sanity has restored itself ; )

[Rodrigo]

Glad to hear that you solved the issue.

 

Cheers,

Rodrigo.