Borders are animating one after one. Need help to animate all borders at same time
Here is running example jsfiddle
CSS
* {
padding: 0;
margin: 0;
outline: none !important;
}
body {
background: #E0D4D4;
overflow: hidden;
}
.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: 1px;
top: 60px;
left: 60px;
height: calc(100% - 60px * 2);
}
.border-l-t, .border-l-b {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2a2a2a;
opacity: 0.6;
overflow: hidden;
}
.border-l-t-wrap, .border-l-b-wrap {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
height: 50%;
}
.border-l-b-wrap {
bottom: 0;
}
.border-l-t {
transform: translate3d(0, 100%, 0);
}
.border-l-b {
transform: translate3d(0, -100%, 0);
}
.animatebutton {
position: relative;
display: inline-block;
margin: 0 auto;
margin: 25% 35%;
z-index: 900;
}
.animate1, .animate2 {
height: 75px;
width: 125px;
display: inline-block;
z-index: 1000
}
.animate1, .animate2 span {
padding: 25px;
display: inline-block;
}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/jquery/3.3.1/jquery.min.js"></script>
<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>Script
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%"}).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);