JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div class="ball-item">
    <div class="ball"></div>
    <div class="ball-info">easeOutSine 1 second</div>
</div>
<div class="ball-item">
    <div class="ball"></div>
    <div class="ball-info">easeOutExpo 1 second</div>
</div>
<div class="ball-item">
    <div class="ball"></div>
    <div class="ball-info">easeOutSine 0.4 second</div>
</div>

CSS

html, body {
    background-color: #222;
    font-family:'Trebuchet MS', Helvetica, sans-serif;
    font-size: 12px;
    color: #fff;
}
.ball-item {
    margin-bottom: 20px;
}
.ball {
    width: 50px;
    height: 50px;
    background-color: #ff8d8d;
    border-radius: 50% 50%;
}
.ball-info {
    margin-top: 5px;
}

JavaScript

var balls = document.querySelectorAll('.ball');

function play() {
    TweenMax.set(balls, {x: 100, opacity: 0});
    TweenMax.to(balls[0], 1, {x: 0, opacity: 1, ease: 'easeOutSine'});
    TweenMax.to(balls[1], 1, {x: 0, opacity: 1, ease: 'easeOutExpo'});
    TweenMax.to(balls[2], 0.3, {opacity: 1, ease: 'easeOutSine'});
    TweenMax.to(balls[2], 0.45, {x: 0, ease: 'easeOutSine'});
}  
play();
document.body.onclick = play;