TweenJS

This demonstrates Tween JS

by black strings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tweenjs/1.0.2/tweenjs.js"></script>
<canvas id="testCanvas" width="600" height="600"></canvas>
hello

JavaScript

var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
var logo;
var text;



function setup(){

		var ctx = canvas.getContext('2d');
    
    
    logo = new createjs.Bitmap();
    logo.x = 300;
    logo.y = -70;
    text = new createjs.Text("Tween JS Tutorial", "50px Arial", "#000000");
    text.alpha = 0;
    text.x = 400 - text.getMeasuredWidth()/2;
    text.y = 300 - text.getMeasuredHeight()/2;
    stage.addChild(logo,text);
    stage.on("stagemousedown",tweenLogo,null,false);
    createjs.Ticker.addEventListener("tick", tick);

}
function tweenLogo(){
    createjs.Tween.get(logo)
    .to({y:200,scaleX:2.0,scaleY:2.0},1500)
    .wait(1000)
    .call(tweenText);
    
}
function tick(){
    
    stage.update();
    
}
function tweenText(){
    stage.removeChild(logo);
     createjs.Tween.get(text)
     .to({alpha:1},1500)
    .wait(400)
     .to({rotation:360},1500)
     .wait(1000)
     .to({x:-800},300);
    
   
    
}
setup()