JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<div class="wrapper">
    <div class="box" id="box1">box 1</div>
   
</div>

CSS

.box{
    position:relative;
    width:125px;
    height:50px;
    background-color:#fff;
    line-height:50px;
    font-weight:bold;
    padding:20px;
    font-size:40px;
} 
    
body{
    background-color:#6f6f6f;
}

JavaScript

var box1 = $('#box1'),
    tl = new TimelineMax({onComplete:completeHandler});

tl.to(box1, 10, {css:{left:200}, ease:Linear.easeNone})
  .append("label1")
  .to(box1, 10, {css:{top:200}, ease:Linear.easeNone})
  .append("label2")
  .to(box1, 10, {css:{left:0}, ease:Linear.easeNone})
  .append("label3")    
  .to(box1, 10, {css:{top:0}, ease:Linear.easeNone})
  .append("label4");
    
function completeHandler(){
   var time1 = tl.getLabelTime("label2");
   var time2 = tl.getLabelTime("label3");
   console.log(time1, time2); //2 3
   tl.pause();
   TweenMax.to(tl, 2000, {time:30});
   //TweenLite.fromTo(tl, 35, {time:time1}, {time:time2, ease:Power4.easeOut})
}