JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div id="console">the animation will begin in 2 seconds</div>
<div class="box" id="b1"></div>
<div class="box" id="b2"></div>
<div class="box" id="b3"></div>
<div class="box" id="b4"></div>

CSS

.box{
    position:relative;
    width:50px;
    height:50px;
    background-color:#f60;
    margin-top:10px;
}

JavaScript

//place multiple tweens into a timeline all with an insertion point of 2 seconds and have them play in sequence

var tl = new TimelineLite({});
tl.insertMultiple([
    TweenLite.to($('#b1'), 1, {css:{left:100}}),
    TweenLite.to($('#b2'), 1, {css:{left:150}}),
    TweenLite.to($('#b3'), 1, {css:{left:200}}),
    TweenLite.to($('#b4'), 1, {css:{left:250}})], 2, "sequence")