JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<canvas id="testCanvas" width="960" height="400"></canvas>
JavaScript
//EaselJS with TweenMax
var canvas;
var stage;
canvas = document.getElementById("testCanvas");
stage = new Stage(canvas);
stage.autoClear = true;
var ball = new Shape();
ball.graphics.setStrokeStyle(5, 'round', 'round');
ball.graphics.beginStroke(('#000000'));
ball.graphics.beginFill("#FF0000").drawCircle(0,0,50);
ball.graphics.endStroke();
ball.graphics.endFill();
ball.graphics.setStrokeStyle(1, 'round', 'round');
ball.graphics.beginStroke(('#000000'));
ball.graphics.moveTo(0,0);
ball.graphics.lineTo(0,50);
ball.graphics.endStroke();
ball.x = 0;
ball.y = 100;
console.log(ball);
stage.addChild(ball);
stage.update();
TweenLite.ticker.fps(60);
TweenLite.ticker.addEventListener('tick', tick);
TweenMax.to(ball, 2, {x:300, rotation:360});
TweenMax.to(ball, 1, {alpha:0, repeat:5, yoyo:true, delay:2});
function tick() {
stage.update();
}