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">Ontotext</div>

CSS

#box {
    height: 100px;
    width: 100px;
    background: #000;
    color: white;
    text-align: center;
}

JavaScript

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

// Declare timelines
var moveRight = createMoveRightTl();

var moveLeft = createMoveLeftTl();



// Timeline fabrics

function createMoveLeftTl() {
    return new TimelineMax({paused: true})
        .fromTo(box, 1, {x: 300}, {x: 0});   
}

function createMoveRightTl() {
    return new TimelineMax({paused: true})
        .fromTo(box, 1, {x: 0}, {x: 300});
}


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