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

[mandark]

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.

[mandark]

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