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!
Oh and please check out my Adobe Edge Animate Templates on CodeCanyon 🙂
My 3D Video Cube is particularly nifty!