<div class="playground">
  <div id="avatar1" class="avatar"></div>
</div>

body {
  background: gold;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: black;
}

createjs.Ticker.setFPS(60);

console.log("-- Testing Begins --");

// data tweening
createjs.Tween.get({opacity:0,x:0}, {loop:true, onChange:render})
  .to({opacity: 0.9, x:200}, 300, createjs.Ease.bounceOut)
  .to({opacity: 0.3}, 300, createjs.Ease.easeOut)
  .wait(200)
  .to({opacity: 0.9}, 300, createjs.Ease.easeOut)
  .to({opacity: 0, x:0}, 300, createjs.Ease.easeOut)
  .wait(1000)

// view rendering
var avatar = document.getElementById('avatar1');

function render(event){
  var data = event.currentTarget.target;
  avatar.style.opacity = data.opacity+"";
  avatar.style.transform = `translateX(${data.x}px)`;
}

// Un-used

// createjs.Tween.get(avatar, {loop:false, onChange:changed})
  // .wait(2000, true)
  // .to({opacity: 0.9, left:100}, 3000)
  // .to({opacity: 0.3}, 2000)
  // .wait(2000)
  // .call(function() {
    // console.log("Tween Animation Done.");
  // });
  // .set({opacity:0}, avatar.style)
  // .wait(2000)
  // .to({opacity:0.5}, 300, createjs.Ease.bounceOut)
  // .wait(2000)

/*function changed(event){
  console.log(event.currentTarget.target);
}*/