[SVG animation]

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

[SVG animation]

the if is setting the states  

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

}

[SVG animation]

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

[SVG animation]

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

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

[SVG animation]

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

Thanks for your magnificent help! 

[SVG animation]

I will play a bit more tomorrow.

something like this? 

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

[SVG animation]

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

onReverseComplete: function () { 
 }

[SVG animation]

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

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

[SVG animation]

toggle = this.index; ?
 

[SVG animation]

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

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

[SVG animation]

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

[SVG animation]

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

See the Pen PyvVzN?editors=1010 by davide77 (@davide77) on CodePen

 

[SVG animation]

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

something like this? 

[SVG animation]

something like this?

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

[SVG animation]

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

I'm lost now! Completely.

[SVG animation]

See the Pen qJMePm?editors=1010 by davide77 (@davide77) on CodePen

Looks is working now! is this correct?

[SVG animation]

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

[SVG animation]

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

 

See the Pen qJGYJJ by davide77 (@davide77) on CodePen

 

[SVG animation]

See the Pen WaWaNE by davide77 (@davide77) on CodePen

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

  
});

[SVG animation]

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. 
 

[SVG animation]

newTarget opens the animation and the oldTarget closes the animation

[SVG 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();  

[SVG animation]

See the Pen qJMePm by davide77 (@davide77) on CodePen

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. 

[SVG animation]

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... 
 

 

[SVG animation]

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.