DD77

 var newAnim = new TimelineLite({paused:true});

the if is setting the states  

if (toggle === "closed") {
    toggle = "open";

}

I tried something like that, 
if(toggle = "open") { 
    anim.pause();
  }else {
    anim.play();
  }
  

Something like this perhaps? is not stopping though...

function onReverseComplete() {
  anim.play(!anim.reversed());
}

I’ll give it a go tomorrow first thing! I’m on my mobile now!

Thanks for your magnificent help! 

I will play a bit more tomorrow.

something like this? 

  $(this).click(function(){
      anim.play();
    
  })

Something liek that? but now sure where to implement it.

onReverseComplete: function () { 
 }

I would say that but I toggle just one! so I'm not sure to reverse the whole animation...

function reverseAnim() { 
  anim.reverse();
  
}

toggle = this.index; ?
 

Tried something like this, but didn't work... 

 
else {
        anim.to(targets[this.index], 1, {autoAlpha:0});
      }

yes, the anim = new TimelineMax(); is inside of the if statement 

Dam that was close! yes, I can see the if close is true statement.  

function doCoolStuff() {
  anim = new TimelineMax();
   if (toggle) {
        anim.to(targets[this.index], 1, { y: -50 });
    } else {
       return;
    }
  
}

something like this? 

something like this?

 toggle = function(){
    if(!anim.isActive()){
      anim.reversed(!anim.reversed())
    }
  }

WOW, it seems an infinite process. It looked fine to me, but you're right! 

I'm lost now! Completely.

Looks is working now! is this correct?

yes, the image open has the button active and the others hidden.
therefore I have to click the back button to revert all 

Commneting off this line, works perfectly, is this what you meant? 
//if (newTarget === oldTarget) {return;}

 

I can't figure it out this guys, I'm sorry, the animation goes back fine but for some reason, the button doesn't previously click doesn't click! 
 am I that far? 
 

$(backButton).click(function () {
        
  TweenMax.to(covers[oldTarget], dur, {attr:{x:0, width:2000}}, 0 );
  TweenMax.to([reveals[oldTarget], covers[oldTarget]], dur, {attr:{x:1000, width:0}});

  
});

I'm struggling because from the beginning I went in deep water with a code written by Point-c.
Since then I could't really manipulate it  much. 
I'll try to work something out. 
 

newTarget opens the animation and the oldTarget closes the animation

on doCoolStuff I initiate the masking animation anim

on the jQuery functions I play and revessing the buttons but not the masking animation .

So I guess I need to connect the doCoolStuff with the buttons? I'm not sure I know how. I tried to do anim.reverse();  

This is my last pen, which I've implementent your code plus, anim.reverse(); which reverts the image mask animation.
however the button still on the second click stops working. 

Ok, adding  anim.reverse(); it returns to the starting position but still if I click the same button again, the animation doesn't restart  and here trust me I getting lost... 
 

Yes, exactly! I need to figure it it out. 
Click on button A > nothing happens, I need t understand why stops working

I Saw that the className: '-=animate' doesn't get removed. But if I remove it manually from the console the button still doesn't work.