JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<button onclick="moveRight();">moveRight</button>
<button onclick="moveLeft();">moveLeft</button>
<button onclick="moveRightLeft();">moveRightLeft</button>
<button onclick="moveLeftRight();">moveLeftRight</button>

<div id="box"></div>

CSS

#box {
    height: 100px;
    width: 100px;
    background: #000;
}

JavaScript

var box = document.getElementById('box');


// Declare timelines
var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});

var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});

var moveRightLeft = new TimelineMax({paused:true})
    .add(moveRight)
    .add(moveLeft);

// Handler functions
window.moveRight = function() { moveRight.play(0); }
window.moveLeft  = function() { moveLeft.play(0); }
window.moveRightLeft = function() 
{
   moveRightLeft.pause(0.4);
}

window.moveLeftRight = function()
{
    moveRightLeft.reverse(0);
}