JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<p class="pause">Pause at bottom left corner</p>
<p class="resume">Resume</p>

<div id="map">
<div class="wagon" id="wagon1">1</div>
<div class="wagon">2</div>
<div class="wagon">3</div>
<div class="wagon">4</div>
<div class="wagon">5</div>
</div>

CSS

#map {
    width: 500px;
    height: 250px;
    background-color: beige;
}



.wagon {
    height: 20px;
    width: 20px;
    z-index: 9999;
    background-color: CadetBlue ;
    position: absolute;
}

JavaScript

var tlParam, tlX, tlY ;
var tlDelay = -0.1;

var tl = new TimelineMax({repeat:-1});

var tlTrain =
{
  "step0" : [ 500, 0],
  "step1" : [ 500, 250],
  "step2" : [ 0, 250 ],
  "step3" : [ 0, 0 ]
 };

var wagons = $(".wagon");
for (var step in tlTrain) {
    var tlParam = tlTrain[step];
    tlX = tlParam[0];
    tlY = tlParam[1];
    tl.add(TweenMax.allTo(wagons,
    1, {
    x: tlX,
    y: tlY,
    ease: Linear.easeNone
    }, tlDelay));
}

$( ".pause" ).on( "click", function() {
    tl.paused(true);
    
    var currentTime = tl.time();
    // gets the time local to this repeat (i.e. it is less than tl.duration())
    
    var pauseTime = 3; // the time to pause at
        pauseTime = pauseTime + (currentTime > pauseTime ? tl.duration() : 0);
    // adjust the pause time to handle an overshoot (prevents it going backwards)
    
    var duration = pauseTime - currentTime;
    // duration to maintain the same speed of the tween
    
    TweenLite.fromTo(tl, duration, { totalTime: currentTime }, { totalTime: pauseTime, ease: Linear.easeNone });
    // tween totalTime so that it can go beyond a repeat
});

$( ".resume" ).on( "click", function() {
tl.resume(tl.time()+0.00001);
});