antoniobrandao

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.

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

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

Makes more sense, but I still can't make it.. Do you have any documentation explaining how to effectively use the EaselJS plugin for animation?

As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!

Let me know if there any place where I can mark this thread as "resolved", I can't find such option anywhere. Thanks

Found the solution to my own problem. There was a conflict with another CSS property coming from my Twitter Bootstrap, called "badge", just as the CSS class name I was using for my badge image. Sorry for the false alarm

Thanks for your test Michael, and yes, the badge does have a slight glow around it, but this glow does not fill the entire image. If you try opening the image again in Photoshop, use the marquee tool and select a portion of it, far from the badge, near the borders, and Photoshop will tell you either "Could not complete your command because the selected area is empty", or "Warning: no pixels were selected". There is indeed transparency, otherwise we wouldn't even see the white/gray chess underneath it. Still looking for a solution for this...

Hello, I'm tweening the autoAlpha of a PNG24 image, but a gray background is appearing around it, in the area that should be transparent. I set it's "visibility:hidden" in the CSS. Then I use Javascript to find out if it's visible in the browser while scrolling. When it is in the viewable area, I tween it to autoAlpha = 1, and in the end of the tween I remove the listener. Basically, this is to implement the effect of showing images only when the user scrolls down to them. But strangely, that gray background is being created. Am I doing something wrong? Is there a technique to prevent this? I attached the troublesome image to this post so you can see it. Thanks