Multiple timeline play issue.

[Zaar]

Hi,

 

I have three boxes and three buttons. everytime the user click on the button , the corresponding box and it's content need to animate in and other boxes and its animations need to reverse. I created the following code but some how it is not working. Please help me.

 

$(document).ready(function() {

  $('body').fadeIn(2000);

  mainTl = new TimelineMax({ paused: true });

  $('.box').each(function(index, element){

   var labelNew = 'box' + index;

  var tl_box1 = new TimelineMax();  

  tl_box1.set('.box', {top: '42%',left:'10%'})  

  .from('.box',0.2, {scale:0.5, autoAlpha:0, top:'-100px',  ease: Bounce.easeIn, force3D:true},2);

    mainTl.add(tl_box1,labelNew);

    mainTl.addPause(labelNew);

    

   });

 

  mainTl.pause();

  $('body').on('click', '#circle-block1', function(event) {

mainTI.reverse();

mainTI.tweenTo("box0");

 

 

});

 

[Carl]

I think my post and demos here will help greatly

http://greensock.com/forums/topic/15460-timeline-click-to-trigger-animation/#entry67263

[Zaar]

Thanks carl. It is was a really helpful.