This is a demo I’ve had the most requests for so here it is – an animating 3D cube in Adobe Edge Animate (and powered by Greensock GSAP).
The method I’ve used to create the cube (and maintain its 3D-ness) is an evolution of some of my older posts like this method and this one. If you’ve seen any of those you should hopefully follow and understand the progression. In previous 3D demos I’ve only use the WebKit syntax which meant they only worked in Safari and Chrome.
In this demo I’ve added in the Mozilla syntax so that it should now work in Firefox.
This isn’t just a demo on how to make a 3D cube – I’ve added all sorts of goodies into this demo to make it interactive. These include:
- Nesting animating symbols and text
- Adding background textures to a face.
- Adding links to the logos.
- Animating several classes at once to make all faces transparent.
- Adding in a Greensock TimelineMax instance which means you could easily speed it up and slow it down (and reverse etc).
- I’ve even left some code in that you can uncomment that shows you how to add a video to a face (and play it in 3D!) which works great on a desktop machine but, as you might imagine, 3D video performs poorly on a mobile device.
There are also loads of other things you can tweak and edit and play around with and it works beautifully on mobile devices too (tested on iPad 2 and iPhone 4).
The Edge Animate project files are fully commented so check them out and do let me know your thoughts in the comments. I’d also be interested to know what the performance is like for you and which browsers you’re using. I’ll be expanding on this project in future blog posts so stay tuned.
Happy 3D tweening!
Check out the 3D Animating Cube demo
Download the 3D Animating Cube source files
Oh and please check out my Adobe Edge Animate Templates on CodeCanyon 🙂
My 3D Video Cube is particularly nifty!
CHRIS GANNON 
This is great! I love the the 3D cube. One question. I have noticed that when you click up or down and then right or left arrows, the cube starts to rotate around it’s Z axis instead of rotating around the Y axis. Is there an easy fix to make the cube rotate on Y axis when you click right and left arrow and rotate only on X axis when you click up and down arrows?
I think you’ll need to place the cube inside a container that only rotates on the Y and then put that container inside another container that only rotates on the X. Try it and let me know!
Chris, thanks for posting this. Amazing resources! Can I ask though: why do none of the Adobe Edge animations work when I try to view them on my Windows 8 phone? Have you observed this same problem in other mobile devices? Thx
Microsoft have rather carelessly omitted the very important CSS3 property ‘preserve-3d’ which means elements in a DIV will always appear flat. I know.
Your kidding? Just when I thought that I had started learning a program that produces to all devices! Oh Microsoft.
However, I just tested the 3d cube after publishing as an OAM and viewing in the DPS preview in InDesign. The animation is not playing in this either… ?
Have you ensured TweenMax/Lite is also bundled into the OAM?
Hint: A .OAM is just a .ZIP file with its extension changed to OAM. Therefore a better method IMO is to ZIP up your entire project the way you want it (including 3rd party JS libs) and then just rename its extension to .OAM
Interesting. Thanks for explaining the zip file / .oas issue.
However, It is now rotating a flat image unfortunately…
The same bundle works fine in the browser, so I assume this means all the correct files are there, but it doesn’t like it in InDesign/DPS…
Make sure any containers have ‘preserve-3d’ set in TweenMax and also check any ‘overflow’ properties – these can affect nested 3D stuff.
This doesn’t work in IE 10 😦
Yeah I know – it’s because Microsoft, in their infinite wisdom, failed to implement the CSS3 transform style ‘preserve-3d’ for nested elements.
Therefore any 3D elements nested inside a DIV (i.e. not on the top level of the DOM) will not have their 3D preserved.
3D *does* work in IE10 but you have to have all your 3D elements on the top level – it’s a right pain because it means that elements in a more complex object (like a cube – ok, it’s not that complex but it’s not as simple as a plane) need to be manipulated individually rather than positioning them in 3D space in a container DIV and then manipulating that container.