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

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 ; )

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

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?

[Tween Align]

In addition to what Jamie said, in V12 insertMultiple has been replaced with add()

 

To add multiple tweens:

 

 

 

add 3 tweens at a time of 0, with start times staggered by 0.5 seconds
tl.add([tween1, tween2, tween3], 0, "stagger", 0.5);
 

Check out the docs to learn more about the position property which allows you to add your tweens at an absolute position (similar to insert/insertMultiple) or at a relative position (similar to append/appendMultiple)

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

 

 

 

In actionscript, TweenAlign is just there to provide a shortcut to access some constants that return the alignment strings.

 

In javascript, there are no constants (well at least if you are supporting IE), plus the entire 'program' of GSAP needs to be instantiated on every page load, plus the total byte count of the .js files matters when it's being transferred over the internet, so TweenAlign was left out as it's not super important and would just add extra overhead when there aren't that many options anyway (please correct me if I misunderstood this Jack). You can just replace TweenAlign.TYPE with the returned string values: "sequence", "start", and "normal" (the default).

 

If you absolutely need to have TweenAlign, just paste the following somewhere in your page before you use TweenAlign the first time, and TweenAlign should work as you expect:

window.TweenAlign = {
  NORMAL: "normal",
  SEQUENCE: "sequence",
  START: "start"
};

For your reference: the code for actionscript TweenAlign:

public class TweenAlign {
  public static const NORMAL:String = "normal";
  public static const SEQUENCE:String = "sequence";
  public static const START:String = "start";
}

.

You guys are Amazing, I really appreciate the help and love the thought of having TweenMax revolutionize the Web.

 

Any chance of an IRC channel available or being setup so the community can bounce idea's / problems and solutions around a bit more freely? 

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

simpler explanation http://forums.greensock.com/topic/7471-problem-need-to-alter-tweenmax-element-after-its-been-paused/

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

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) 
); 

 

 

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

var tm = new TimelineMax();

var bgTween = new TweenMax();

var barWidthTween = new TweenMax();

var groupCount = 4;
var clickCount = 0;
var animationTime = 5; // seconds
var targetSelector = '#statusBar';
var splitTime = animationTime / groupCount; //1.25 second

jQuery('#target').click(function(){

clickCount++;

// this will basically eval to 25%, 50%, 75% & 100%
var animWidth = ((100/groupCount)*clickCount);
 
switch( clickCount ){
    case 1:
      tm.add([
          bgTween.to(jQuery(targetSelector),animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}),
          barWidthTween.to(jQuery(targetSelector),splitTime ,{width:animWidth+"%", onComplete: pauseAnimation})
      ],0,0);
      break;
    default:
    // presumes first click/case has already been met (this is the part thats not working)
     tm.append( barWidthTween.to(jQuery(targetSelector), splitTime,{width:animWidth+"%", onComplete: pauseAnimation}) );
     break;
}


});

 

 

 

Note: var "barWidthTween" has a callback after the 1.25 second execution to pause the whole timeline before the var "bgTween" has finished. [ it should still have another 3.75 sec's left ]

 

 

"WHAT IM TRYING TO ACHIEVE"

A colour bar that changes colour over a 5 second period, while that same bar increases in size on every click. "hense the need for the pause every 1.25 seconds"

 

 

I need to be able to reverse this motion also which is why im not using multiple TimelineMax instances.

 

 

I hope I've made my problem clear and if not, i'll try and add some clarity.

[Tween Align]

Thanks "carl schooff" & "jamiejefferson",

 

Problem Solved.

[Tween Align]

I'm aware that TweenAlign.START requires a  plugin etc.. but i've only seen material resolving the issue for (AS*).

 

Where can I find the plugin to allow TimelineMax.insertMultiple to accept TweenAlign.START as an argument?