JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<div id="box"></div>
<div id="go" class="btn">go</div>
<div id="reset" class="btn">reset</div>
<div id="stop" class="btn">stop</div>

CSS

#box {
    position: absolute; top: 0; left: 0;
    width: 100px; height: 100px; background: #ccc;
}

.btn {
    position: absolute; top: 250px; left: 0;
    width: 100px; height: 25px; background: #ccc;
    text-align: center;
}

#reset { top: 280px; }
#stop { top: 310px; }

JavaScript

var t = new TimelineMax({ 
    paused: true
});

var count = 0;

t.add(TweenLite.to('#box', 2, { left: 200}), 0);
t.add(TweenLite.to('#box', 0.5, { top: 50}), 1.5);
t.add(function(){ 
    if(!this.timeline.data.reversing) {
        count++;
        $('#box').text(count)
    }
}, 1.8);
;

$('#go').click(function(){
    t.data = { reversing: false };
    t.play();
});

$('#reset').click(function(){
    t.data = { reversing: true };
    t.reverse();
});


$('#stop').click(function(){
    t.seek(2).pause();
});