JSFiddle - React, Tailwind, and code Playground

by kaushalc

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.combined.js"></script>
<canvas id="canvas" width="500px" height="500px"></canvas>

JavaScript

var showMC;
var hideMC;
var placeholderContainer
var shapeContainer;


var img1 = new createjs.Shape(
     new createjs.Graphics().beginFill("#999999")
         .drawCircle(30,30,30));
img1.x=100;
img1.y=100;

shapeContainer = new createjs.MovieClip();
shapeContainer.addChild(img1)
shapeContainer.x=200;
shapeContainer.y=200;

placeholderContainer = new createjs.MovieClip();
placeholderContainer.x=0;
placeholderContainer.y=0;

buildShowImageTween();
placeholderContainer.addChild(shapeContainer)
placeholderContainer.addChild(showMC)

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas); 
stage.addChild(placeholderContainer)
stage.update();

createjs.Ticker.addEventListener("tick", stage);
document.addEventListener("click",function(evt){
	console.log("IN CLICK HANDLE")
	showMC.gotoAndPlay("start")
})

function buildShowImageTween(){
  showMC = new createjs.MovieClip();
  showMC.loop=false;
  var tween1 = createjs.Tween.get(shapeContainer).wait(10)
  .to({scaleX:0.4,scaleY:0.4},0)
  .to({scaleX:1.05,scaleY:1.05,alpha:1},10,createjs.Ease.get(1))
  .to({scaleX:1,scaleY:1},13,createjs.Ease.get(1))
  .wait(1);
  showMC.timeline.addTween(tween1)
 }