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="resume">Pauses at 50% - Click to resume</p>

<div id="map">
    <div class="wagon" id="wagon1">1</div>
</div>

CSS

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

JavaScript

var tl = new TimelineMax();

var wagons = $(".wagon");
tl.to(wagons, 1, {
    x: 80,
    ease: Linear.easeNone
});
tl.addPause(0.5, function() {
    alert('addPause callback')
});

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