JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

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

CSS

body {
  padding: 0;
  margin: 0;
}
#demoCanvas {
  border: 1px solid #eee;
  background-color: #eee;
}

JavaScript

var stage = new createjs.Stage("demoCanvas");

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
  
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);