Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
antoniobrandao

3D Card Flip in Canvas with GSAP JS

Recommended Posts

Hello,

 

EDIT: I'm looking for 3D Planes in 3D space, like Flash's native 3D planes and like CSS3 3D transforms. Hard planes rotating & moving in X Y Z.

 

I'm looking for some advice on how I may achieve a 3D Image Flip effect using GSAP JS, in the Canvas.

 

The "cards" will be Bitmaps with transparent areas (PNGs)

 

I intend to re-create this: http://www.westfieldbrochure.com

 

That's a small presentation I crated using GSAP JS but in that case I used CS3 3D transforms. I would like to try it in Canvas now. 

 

But I have no idea how to start. If you guys could give me some advice I would be really grateful.

 

Thanks in advance

AB

Link to post
Share on other sites

Thanks Jonathan, but that's not what I'm looking for.

 

I'm looking for actual 3D planes like CSS3 3D transforms can do, and like the Flash native 3D planes.

 

The examples you provided are smart drawing techniques that simulate a moving page, they are great, but need actual planes moving in space. Hard planes!

 

Perhaps you have another suggestion with this in mind?

 

Thank you again

Link to post
Share on other sites

ok quick question..

 

As an example are you talking about 3d planes like this?  (even though this example shows rotating in Z)

 

http://www.html5canvastutorials.com/three/html5-canvas-webgl-plane-with-three-js/

 

And are you going to be using any canvas library like EaselJS, KineticJS, or Raphael and have GSAP animate the canvas properties and objects?

 

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

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

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

 

Or creating this in straight canvas without a canvas library and have GSAP animate the canvas objects and properties?

Link to post
Share on other sites

Hello Jonathan,

 

Thank you for those examples. Yes that is more what I am looking for. I knew I could go in the direction of ThreeJS, but I feared becoming overwhelmed by such a powerful WebGL framework.

 

I know ThreeJS makes it easer to people who have no knowledge of WebGL, but still, I felt like my solution would be something like EaseJS, KineticJS, etc.

 

But these options like KineticJS don't seem to allow 3D Planes except integrating with the likes of ThreeJS.

 

Having a straight canvas without a canvas library and have GSAP animate que canvas objects would be awesome! Is this possible? How would this work? All I need is to load images (or flat color planes) and play with their rotationX, rotationY, Z coordinate, etc.

Link to post
Share on other sites

if you go to the below link, you can see a nice example on using GSAP with canvas.. how it animates canvas objects and properties

 

you might have to scrub the video to get to the canvas part, its about 16 minutes and 22 seconds in the video

 

http://gotoandlearn.com/play.php?id=161

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.

×