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">start playing tl </div>
<div id="box"></div>

CSS

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

JavaScript

var tl = new TimelineMax({onComplete:completeH});

tl.insert(TweenLite.to(box, 1, {css:{left:300}}), 'startRight');
tl.insert(TweenLite.to(box, 1, {css:{top:300}}), 'startDown');
tl.insert(TweenLite.to(box, 1, {css:{left:0}}), 'startLeft');


function completeH(){
    tl.paused(true);
    TweenMax.fromTo(tl, 1, {time:tl.getLabelTime('startDown')} ,{time:tl.getLabelTime('startLeft'), repeat:-1});
}