Jump to content


TweenMax rotationX with Canvas and EaselJS

Moderator Tag

Recommended Posts

I'm using TweenMax to try to do a rotationX on a Bitmap that I have added to the stage using EaselJS. Does anyone know if it is possible? 


I have looked at this post but it has been over a year and I didn't know if something might have changed. http://community.createjs.com/discussions/easeljs/462-integration-with-greensock-tweenmax-tweenlite
Here is the code:

_rodHolderCover = new createjs.Bitmap("images/rodCover1.png");

_rodHolderCover.addEventListener('mousedown', handleKeyDown);


then in the event handler I have this. 


TweenMax.to(_rodHolderCover, 1,{rotationX: 180});


rotation works great and so does x and y,

Link to comment
Share on other sites

Hello TShelton41, Welcome to the GreenSock Forums!


GSAP offers a EaselPlugin:





Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter (see http://www.createjs.com/#!/EaselJS for more information about EaselJS). Of course you don't need the plugin to tween normal numeric properties of EaselJS objects (like x and y), but some filters or effects require special manipulation which is what EaselPlugin is for. Currently it only handles special properties related to ColorFilter and ColorMatrixFilter, and it can tween the "frame" property of a MovieClip.


Also if you can provide an example of your code or a link to

See the Pen by pen (@pen) on CodePen

or jsfiddle with your code we can better help you :)

Link to comment
Share on other sites

Hi Todd,


From what I can tell, Easel DisplayObjects don't support any 3D properties. 

Not really sure what canvas libraries do. It seems that most folks who need to do 3D stuff in the browser rely on three.js. Definitely have heard of some folks having great success with three.js and GSAP.



Link to comment
Share on other sites

Yep, it looks like Carl is exactly right - 3D stuff with perspective just isn't supported in canvas libraries like EaselJS: http://community.createjs.com/discussions/easeljs/713-3d-card-flipping


Sorry Todd. I wish there was some magic we could do with GSAP to make EaselJS capable of that stuff. If you find any non-WebGL canvas libraries that support 3D transforms, please let us know. 

Link to comment
Share on other sites

Thank you Jonathan, Carl and Jack for the quick replies. 


It was always worth a try. 


If I find any good libraries I will let you know. I might just have to fake it for now. 



Keep up the great work Jack and Carl. 

Link to comment
Share on other sites

  • 3 years later...

This is an old thread, but hopefully this will help other people looking to use 3D (more specifically 2.5D ... props like 'rotationX', 'z', etc), in EaselJS.


I found a library called DepthJS, that adds 2.5D functionality to EaselJS, (note that prop names are different, 'rotationX is called 'rotX' in DepthJS):



  • Like 2
Link to comment
Share on other sites

Hi Tim, 


Thanks for sharing. Looks cool.

Any success integrating it with Animate CC? 

Link to comment
Share on other sites

  • 5 weeks later...

I ran into a layering issue with DepthJS that makes it not feasible for use in my current EaselJS project.


DepthJS places its 2.5D content in a separate"depthjs.Stage3D" object. You add this "depthjs.Stage3D" object to your standard EaselJS Stage object, but the "depthjs.Stage3D" object always sits on top of all other regular EaselJS content in that Stage.


So layering the DepthJS content with your EaselJS content can become a bit more complicated. If you want your standard EaselJS content both below and above your DepthJS content, I think you'd have to create a separate EaselJS Stage for the EaselJS content that sits above the DepthJS content.

Link to comment
Share on other sites

  • 10 months later...

I'm using DepthJS to animate some objects that are pinned to a clothesline. I'm using rotX to rotate the objects toward and away from the "camera" (the camera is looking directly at the object). The problem I'm having is that I can only get the rotation to spin toward the camera (and back). I can't get it to spin away from the camera. In TweenMax I think you'd handle this by using something like rotationX: "20_ccw" vs rotationX:"20_cw" or even += and -=. I haven't been able to find the equivalent in DepthJS but it seems like such a basic thing! Has anyone had any success reversing the direction of the 3D animation in DepthJS?

Link to comment
Share on other sites

3 hours ago, Nolla283 said:

In TweenMax I think you'd handle this by using something like rotationX: "20_ccw" vs rotationX:"20_cw" 


You're thinking of the DirectionalRotationPlugin, which is baked into the CSSPlugin. Try using it explicitly.



TweenLite.to(obj, 1, {
  directionalRotation: {
    rotX: "20_ccw"


  • Like 3
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.