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

.borders {
	height: 100vh;
	width: 100vw;
	position: absolute;
	display: inline-block;
	z-index: 1;
}
.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: 0.6;
	transform: translate3d(-100%, 0, 0);
}
.border-l {
	position: absolute;
	z-index: 1;
	width:...

JavaScript

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

var tl = new TimelineLite();

	$('.animate1').on('click', function(event) {
		
		TweenLite.fromTo(".border-l-t", 1, {x:"0%", y:"100%"}, {x:"0%", y:"0%"});
		TweenLite.fromTo(".border-l-b", 1, {x:"0%", y:"-100%"}, {x:"0%", y:"0%"});
		
		TweenLite.fromTo(".border-r-t", 1, {x:"0%", y:"100%"}, {x:"0%", y:"0%"});
		TweenLite.fromTo(".border-r-b", 1, {x:"0%", y:"-100%"}, {x:"0%", y:"0%"});
		
		
		TweenLite.fromTo(".border-t-l", 1, {x:"100%", y:"0%"}, {x:"0%", y:"0%"});
		TweenLite.fromTo(".border-t-r", 1, {x:"-100%", y:"0%"}, {x:"0%", y:"0%"});
		
		TweenLite.fromTo(".border-b-l", 1, {x:"100%", y:"0%"}, {x:"0%", y:"0%"});
		TweenLite.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%"}).to(".border-r-t", 1.3, {x:"0%", y:"0%"});
		tl.fromTo(".border-r-b", 0.5, {x:"0%", y:"0%"}, {x:"0%", y:"-100%"}).to(".border-r-b", 1.3, {x:"0%", y:"0%"});
		
		
		
		tl.fromTo(".border-t-l", 0.5, {x:"0%", y:"0%"}, {x:"100%", y:"0%"}).to(".border-t-l", 1.3, {x:"0%", y:"0%"});
		tl.fromTo(".border-t-r", 0.5, {x:"0%", y:"0%"}, {x:"-100%", y:"0%"}).to(".border-t-r", 1.3, {x:"0%", y:"0%"});
		
		tl.fromTo(".border-b-l", 0.5, {x:"0%", y:"0%"}, {x:"100%", y:"0%"}).to(".border-b-l", 1.3, {x:"0%", y:"0%"});
		tl.fromTo(".border-b-r", 0.5, {x:"0%", y:"0%"}, {x:"-100%", y:"0%"}).to(".border-b-r", 1.3, {x:"0%", y:"0%"});
	
	});
})(jQuery);