Gardemarin

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: http://codepen.io/GreenSock/pen/LpxOqR (just paste)

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/

Have fun ! https://jsfiddle.net/Gardemarin/xgzezL4q/

http://scrollmagic.io

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/

You can try it https://jsfiddle.net/Gardemarin/y1fbqqew/ Here I use Modifiers plugin.

You need to add a ModifiersPlugin TweenMax.staggerFrom('.box', 1, { y: function(index) { return (index+1) * -100;} }, 0.5);