TShelton41

TweenMax rotationX with Canvas and EaselJS

Recommended Posts

Hello,
 
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");
stage.addChild(_rodHolderCover);

_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,

Share this post


Link to post
Share on other sites

Hello TShelton41, Welcome to the GreenSock Forums!

 

GSAP offers a EaselPlugin:

 

http://api.greensock.com/js/com/greensock/plugins/EaselPlugin.html

 

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 codepen or jsfiddle with your code we can better help you :)

Share this post


Link to post
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.

 

-carl

Share this post


Link to post
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. 

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

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):

 

http://mbmedia.cc/depthjs/

  • Like 2

Share this post


Link to post
Share on other sites

Hi Tim, 

 

Thanks for sharing. Looks cool.

Any success integrating it with Animate CC? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.