EaselJS with GreenSock Tweenlite TweenMax

Posted by robert | Filed under JavaScript

I just started looking at EaselJS “A Javascript library that makes working with the HTML5 Canvas element easy”. I am a be fan of GreenSock’s tweening and easing library so I wanted to see how I could get TweenLite working with EaselJS.

In this JavaScript tutorial I will show a very simple example how you can integration Greensock (Tweenmax / Tweenlite) with EaselJS.

var canvas = document.getElementById('mainCanvas');
var stage = new createjs.Stage(canvas);

var shape = new createjs.Shape();
shape.graphics.beginFill("#000");
shape.graphics.drawCircle(0, 0, 100);
shape.graphics.endFill();
stage.addChild(shape);

stage.update();

TweenLite.ticker.addEventListener("tick", stage.update, stage);

TweenLite.to(shape, 1, {delay: 1, x:100, y:100, ease:Cubic.easeInOut});

Here is all the HTML markup and JavaScript for the EaselJS and Tweenlite example.

<!DOCTYPE html>
<html>
<head>
    <title>EaselJS with GreenSock Tweenlite TweenMax</title>
    <script type="text/javascript" src="libs/easeljs/easeljs-0.6.0.min.js"></script>
    <script type="text/javascript" src="libs/greensock/easing/EasePack.min.js"></script>
    <script type="text/javascript" src="libs/greensock/TweenLite.min.js"></script>
    <script type="text/javascript">
        function init()
        {
            var canvas = document.getElementById('mainCanvas');
            var stage = new createjs.Stage(canvas);

            var shape = new createjs.Shape();
            shape.graphics.beginFill("#000");
            shape.graphics.drawCircle(0, 0, 100);
            shape.graphics.endFill();
            stage.addChild(shape);
            stage.update();

            TweenLite.ticker.addEventListener("tick", stage.update, stage);

            TweenLite.to(shape, 1, {delay: 1, x:100, y:100, ease:Cubic.easeInOut});
        }
    </script>
</head>
<body onload="javascript:init();">

    <canvas id="mainCanvas" width="400" height="400"></canvas>

</body>

You can download example files below:

Comments (2) | April 27th, 2013

2 Responses to “EaselJS with GreenSock Tweenlite TweenMax”

  1. Dirk Krause Says:
    May 14, 2013 at 6:43 am

    Thanks for the example!
    I took the liberty to turn this into a jsfiddle here:
    http://jsfiddle.net/dirkk0/JhF92/
    Best,
    Dirk

    Reply

Leave a Reply