JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<link rel="stylesheet" href="http://www.greensock.com/_css/tour/greensock-theme/jquery-ui-1.9.1.custom.css">
<script src="http://www.greensock.com//js/src/tour/jquery/jquery-ui-1.9.1.custom.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<button id="kill">kill</button>
<div id="wrapper">
    <div id="kite"></div>
</div

CSS

#kite{
    position:absolute;
    width:100px;
    height:100px;
    top:400px;
    left:200px;
    background-color:#000;
    
    
}

#wrapper{
    position:relative;
    height:600px;
    /*remedies an odd flicker when the first move() starts*/
    -webkit-backface-visibility:hidden;
}

JavaScript

TweenLite.set($("#wrapper"), {css:{perspective:500}});
TweenLite.set($("#kite"), {css:{rotation:45}});

var kite = {
    tweenTarget: document.getElementById("kite"),
    flyUp: function() {
        console.log('flyup()');
        TweenLite.to(this.tweenTarget, 1, {
            css: {
                top: 100
            },
            onComplete: this.move,
            //set scope for onComplete
            onCompleteScope:this
        });
    },
    move: function(tween) {
        //use "this" in a tween's onComplete
        console.log(this);
        this.sayHello();
      
        TweenLite.to(this.tweenTarget, 1, {
            css: {
                left: getRandom(0, 500),
                rotationX: getRandom(-40, 40)
            }, 
            onComplete: this.move,
            onCompleteScope:this
        });

    }, 
    sayHello: function(){
       console.log('hello');        
    }
}

function getRandom(max, min){
    return Math.floor(Math.random() * (1 + max - min) + min);
    }

$("#kill").click(function(){
  TweenLite.killTweensOf(kite.tweenTarget);
  })
    
    
kite.flyUp();