I’ve received quite a few requests to do a demo of a 3D card flip with a face on both sides. So this demo is a progression of one of my previous tutorials.
I’ve also used Greensock’s TweenMax and TimelineMax to create the animation because it gives great flexibility for placing labels and callbacks in your virtual timeline and the performance is solid.
It also allows all sorts of other really useful tools and events like timeScale (speeding up and slowing down your animation), reversing, onRepeat and onComplete events, addLabel, addCallBack etc. – too many to list. If you haven’t already discovered Greensock you’re in for a treat – once you try it you’ll probably never go back to another tween engine.
You’ll need to download the Edge Animate project files at the bottom because it contains the two logo image assets. I could have done it with just rectangles drawn inside of Edge and just pasted some code here for you to copy but images look better – plus I’ve added some test fields and coded the text to swap depending on the visible face, just to spice it up a bit.
This was created in Adobe Edge Animate 1.0 – I’d like send my congratulations to Mark Anders, Sarah Hunt and the Edge Animate team for their hard work on creating such a cool tool and finally getting it to 1.0!
If you haven’t updated your preview version yet you should do it now – it’s FREE!
Note: this uses WebKit and therefore only works in desktop and mobile browsers like Chrome and Safari – this is not a limitation of Edge Animate – it’s a browser limitation. IE and Firefox need to catch up!
UPDATE: You can now get a MUCH better, slicker version of this on CodeCanyon as a nicely packaged Adobe Edge template – I have completely updated and revamped it, it has more features, is fully commented and totally editable (with customisable interactive animations on both front and back faces).
Purchase it on my CodeCanyon page for the crazy low price of only $4!
Alternatively here’s a very old, basic version (but hey, it’s still free!) .