Makzan: Tween.js examples

I’m recently trying to use the TweenJS library with DOM elements.

Here is my first attempt.

See the Pen TweenJS Testing by Thomas Seng Hin Mak (@makzan) on CodePen.

Here is the core part of the source code. I didn’t use the CSS plugin from TweenJS. Instead, I interpolate the values in the data object and use a dedicated view rendering function to render the changes. I find it cleaner and fit my philosophy of data-view-separation.

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