Jump to content
Search Community

TweenMax rotationX with Canvas and EaselJS

TShelton41 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

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,

Link to comment
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

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

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

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

 

http://mbmedia.cc/depthjs/

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

https://greensock.com/docs/Plugins/DirectionalRotationPlugin

 

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.
×
×
  • Create New...