JSFiddle - React, Tailwind, and code Playground

HTML

<div class="borders">
    <div class="border-t">
        <div class="border-t-l-wrap">
            <div class="border-t-l"></div>
        </div>
        <div class="border-t-r-wrap">
            <div class="border-t-r"></div>
        </div>
    </div>
    <div class="border-r">
        <div class="border-r-t-wrap">
            <div class="border-r-t"></div>
        </div>
        <div class="border-r-b-wrap">
            <div class="border-r-b"></div>
        </div>
    </div>
    <div class="border-b">
        <div class="border-b-l-wrap">
            <div class="border-b-l"></div>
        </div>
        <div class="border-b-r-wrap">
            <div class="border-b-r"></div>
        </div>
    </div>
    <div class="border-l">
        <div class="border-l-t-wrap">
            <div class="border-l-t"></div>
        </div>
        <div class="border-l-b-wrap">
            <div class="border-l-b"></div>
        </div>
    </div>
</div>
<div class="animatebutton">
    <button class="animate1"><span>animate 1</span></button>
    <button class="animate2"><span>animate 2</span></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/easing/EasePack.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js"></script>

CSS

* {
	padding: 0;
	margin: 0;
	outline: none !important;
}
body {
	background: #E0D4D4;
	overflow: hidden;
}
.borders {
	height: 100%;
	width: 100%;
	position: absolute;
	display: inline-block;
	z-index: 0;
}
.border-t {
	position: absolute;
	z-index: 1;
	height: 1px;
	top: 60px;
	left: 60px;
width: calc(100% - 60px * 2);
}
.border-t-l-wrap, .border-t-r-wrap {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
}
.border-t-l-wrap {
	left: 0;
	width: 50%;
}
.border-t-r-wrap {
	right: 60px;
	width: calc(50% - 60px);
}
.border-t-l {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2a2a2a;
	opacity: 0.6;
	transform: translate3d(100%, 0, 0);
}
.border-t-r {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2a2a2a;
	opacity: 0.6;
	transform: translate3d(-100%, 0, 0);
}
.border-r {
	position: absolute;
	z-index: 1;
	width: 1px;
	top: 60px;
	right: 60px;
height: calc(100% - 60px * 2);
}
.border-r-t-wrap {
	top: 60px;
	height: calc(50% - 60px);
}
.border-r-t, .border-r-b {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2a2a2a;
	opacity: 0.6;
	overflow: hidden;
}
.border-r-t-wrap, .border-r-b-wrap {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
}
.border-r-b-wrap {
	bottom: 0;
	height: 50%;
}
.border-r-t {
	transform: translate3d(0, 100%, 0);
}
.border-r-b {
	transform: translate3d(0, -100%, 0);
}
.border-b {
	position: absolute;
	z-index: 1;
	height: 1px;
	bottom: 60px;
	left: 60px;
width: calc(100% - 60px * 2);
}
.border-b-l-wrap, .border-b-r-wrap {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
}
.border-b-l-wrap {
	left: 0;
	width: 50%;
}
.border-b-r-wrap {
	right: 0px;
	width: 50%
}
.border-b-l {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2a2a2a;
	opacity: 0.6;
	transform: translate3d(100%, 0, 0);
}
.border-b-r {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2a2a2a;
	opacity:...

JavaScript

jQuery(document).ready(function(event) {
    "use strict";

    var tl = new TimelineLite();

    $('.animate1').on('click', function(event) {

        tl.fromTo(".border-l-t", 1, {
            x: "0%",
            y: "100%"
        }, {
            x: "0%",
            y: "0%"
        });
        tl.fromTo(".border-l-b", 1, {
            x: "0%",
            y: "-100%"
        }, {
            x: "0%",
            y: "0%"
        });

        tl.fromTo(".border-r-t", 1, {
            x: "0%",
            y: "100%"
        }, {
            x: "0%",
            y: "0%"
        });
        tl.fromTo(".border-r-b", 1, {
            x: "0%",
            y: "-100%"
        }, {
            x: "0%",
            y: "0%"
        });


        tl.fromTo(".border-t-l", 1, {
            x: "100%",
            y: "0%"
        }, {
            x: "0%",
            y: "0%"
        });
        tl.fromTo(".border-t-r", 1, {
            x: "-100%",
            y: "0%"
        }, {
            x: "0%",
            y: "0%"
        });

        tl.fromTo(".border-b-l", 1, {
            x: "100%",
            y: "0%"
        }, {
            x: "0%",
            y: "0%"
        });
        tl.fromTo(".border-b-r", 1, {
            x: "-100%",
            y: "0%"
        }, {
            x: "0%",
            y: "0%"
        });

    });


    $('.animate2').on('click', function(event) {

        tl.fromTo(".border-l-t", 0.5, {
            x: "0%",
            y: "0%"
        }, {
            x: "0%",
            y: "100%"
        }).to(".border-l-t", 1.3, {
            x: "0%",
            y: "0%"
        });
        tl.fromTo(".border-l-b", 0.5, {
            x: "0%",
            y: "0%"
        }, {
            x: "0%",
            y: "-100%"
        }).to(".border-l-b", 1.3, {
            x: "0%",
            y: "0%"
        });

        tl.fromTo(".border-r-t", 0.5, {
            x: "0%",
            y: "0%"
        }, {
            x: "0%",
            y: "100%"
       ...