Tween.js examples

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

Here is my first attempt.

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

view raw
tweenjs-example.js
hosted with ❤ by GitHub

Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.