Search code examples
javascriptcreatejs

Creating simple text tweening with CreateJS

I've started to learn how to use CreateJS. I'm trying to make a simple text tweening. So I have this code:

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>

<script>
function init() {
    var c = createjs;
    var stage = new c.Stage("myCanvas");

    var txt = new c.Text("Hola!", "bold 16px Arial");
    txt.alpha = 0.2;
    stage.addChild(txt);
    c.Tween.get(txt)
        .to({alpha:1}, 1500)
        .to({text:"Ciao!"}, 800)
        .to({rotation:360, text:"Hello"}, 1300)
        .to({y:380}, 2000, c.Ease.bounceOut)
        .wait(1000)
        .call(alert, ["Done animating!"], window);

    stage.update();
}
</script>
</head>
<body onLoad="init();">
    <canvas id="myCanvas" width="300" height="400">Canvas not supported</canvas>
</body>

I see my text on the canvas, it has alpha 0.2, it even pops up the alert in the end, but I don't see any motion on the canvas. What am I doing wrong?

Solution

  • stage.update(); needs to be called repeatedly in order to correctly render animations, the most common way is to call it on every tick.

    createjs.Ticker.addEventListener("tick", function() {
    stage.update();
});

    Add this to your code and then it should work properly.