JSFiddle - React, Tailwind, and code Playground

by Mysterious

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.play())
    .add(moveLeft.play());

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


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