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:
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
May 14, 2013 at 5:41 pm
Thanks, I will try to do that in the future for my simple examples.