<body>
  <canvas id="demoCanvas" width="500" height="300"></canvas>
  
  <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
  
  <script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
</body>
#demoCanvas {
  border: 1px solid #333;
}
window.onload = function(){
  init();
  
  function init() {
    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);
    stage.update();
    
    tween();
    
    function tween(){
      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);
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.