Tween.JS example

tween-example.js

// 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)`;
}