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.