JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
<div class="box black"></div>
<div>
    <button id="start">start</button>
    <button id="reverse">reverse</button>
</div>

CSS

.box {
    width: 30px;
    height: 30px;
    margin-left: 0;
}
.red {
    background-color : #f00;
}
.green {
    background-color : #0f0;
}
.blue {
    background-color : #00f;
}
.black {
    background-color : #000;
}

JavaScript

var red = $('.red');
var green = $('.green');
var blue = $('.blue');
var black = $('.black');

var tl = new TimelineLite({
    paused: true,
    callbackScope: this,
    onReverseComplete: onTlReverseComplete
});
tl.staggerTo([red, green, blue], 0.3, { marginLeft: 100, ease: Power1.easeInOut }, 0.3);
tl.addLabel('MyLabel');
tl.to(black, 0.3, { marginLeft: 100, ease: Power1.easeInOut, onReverseComplete: onBlackBoxReverseComplete, callbackScope: this }, '+=4');

$('#start').click(function () {
    tl.play();
});
$('#reverse').click(function () {
    tl.reverse();
});

function onBlackBoxReverseComplete() {
    tl.reverse('MyLabel');
}

function onTlReverseComplete() {
    tl.stop();
}