Jump to content
Search Community

GSAP with easeljs

mafox296 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi mafox296  :)


I must remind you that ; with CSSplugin you can animate CSS Properties of DOM elements , not Canvas objects !! you should animate Canvas shape Alpha property and redraw the stage on tween update .


maybe something like this :

function init() {
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
var circle = new createjs.Shape();
var circleprop = {alpha:1};
circle.graphics.beginFill("red").drawCircle(100, 100, 50);
circle.x = 100; circle.y = 100;
circle.alpha = circleprop.alpha;
circle.on("mousedown", function(evt) {
TweenLite.to(circleprop, 3, {alpha:"-=1",onUpdate:circleupdate});
function circleupdate() {
circle.alpha = circleprop.alpha;
stage.update(); }

...  :)

Link to comment
Share on other sites

AncientWarrior is right, but you don't really have to use a proxy object like that. You can simply change your tween to this:

TweenLite.to(circle, 2, {alpha:0, onUpdate:stage.update, onUpdateScope:stage} );

There were a few typos in your code too, and keep in mind that EaselJS uses "alpha", not "opacity". Apparently in more recent versions of EaselJS, they force you to call update() on the stage to see any of the changes take effect. In other words, even if you set circle.alpha = 0.5, you'd never see that change unless you also call stage.update(). 

  • Like 3
Link to comment
Share on other sites

I must thank you for your prompt and useful replies. My initial example is just a simple use of using GSAP in easeljs.

my slightly more complicate one is:


weenLite.to(circle, 2, {alpha:0.5, x: 400, y: 200, ease:Bounce.easeOut, 

  onUpdate:stage.update, onUpdateScope:stage} );


 which works fine.I notice that I have to use x: instead of left:, but ease:Bounce.easeOut works. This raises the point, when must one use the tweenjs syntax instead of the GSAP syntax? Perhaps there are some published notes on this. 


Link to comment
Share on other sites

I think a key concept that might help you understand this stuff is that GSAP is not locked into a certain set of properties - it is a highly flexible pure JS engine that can tween ANY numeric property of ANY object. So the thing that defines what properties you can tween is...the objects you're tweening. 


For example, let's say you create your own canvas library that uses the property "superAlpha" instead of "opacity" or "alpha". GSAP doesn't care:

var yourObject = new Whatever();
yourObject.superAlpha = 0;
TweenLite.to(yourObject, 2, {superAlpha:1});

So if you're tweening EaselJS objects, you tween the properties that EaselJS exposes. If you're tweening CSS properties of DOM elements, you tween those properties by their names accordingly. 


Does that clear things up?

  • Like 1
Link to comment
Share on other sites

Thanks. That certainly explains the misconception I had. Now all I need to do is find the properties that an easeljs object exposes. By the way I'm going through the GSAP book "GreenSock Animation Platform" which others might find useful, while experimenting with createjs.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...