[CSS Plugin diagonal fold]

the best solution I think is morphSVG plugin: http://greensock.com/morphSVG.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 200 200" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#1D1D1D;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#88C540;}
	.st2{fill:none;stroke:#E5285D;stroke-miterlimit:10;}
</style>
<rect id="background" class="st0" width="800" height="400"/>
<path id="square" class="st1" d="M30.1,25.1V0.5h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29H30.1z"/>
<path id="square2" class="st2" d="M0.5,0.5h29.6h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29V0.5z"/>
  
</svg>

TweenLite.to("#square", 50, {morphSVG:{shape:"#square2", shapeIndex:1}});
//comment out next line to disable findShapeIndex() UI
findShapeIndex("#square", "#square2");

You can try my code here: 

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen

(just paste)

[Making Card Look Real in 3D Mousemove]

Add to class  card perspective:

.card {

  perspective: 1400px;

}

 

and change from -165 to 165:

 tl.to([$outerBG, $outerBlank], 1, {

    rotationX: 165

  });

 

https://jsfiddle.net/Gardemarin/ntkkjx0g/

[Tween a Div on its X-axis from the righthand side and maintain border-width]

Have fun !

https://jsfiddle.net/Gardemarin/xgzezL4q/

[Animation control by scroll]

http://scrollmagic.io

[Declaring a variable outside a function]

Your animations are pretty messy and I think that I don't understand everything what you want to achieve, but any way .. you will have pretty good example Here I use only one animation for both buttons:

https://jsfiddle.net/Gardemarin/2L30f1s8/

[Animating waves with GSAP]

You can try it

https://jsfiddle.net/Gardemarin/y1fbqqew/

Here I use Modifiers plugin.

[TweenMax.staggerTo() array item index]

You need to add a ModifiersPlugin

  TweenMax.staggerFrom('.box', 1, {
    y: function(index) { return (index+1) * -100;}
  }, 0.5);