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.addPause(3);
});

$( ".resume" ).on( "click", function() {
tl.play();
tl.resume();
});