3D Card Flip using Adobe Edge Animate and Greensock TimelineMax

3D Card Flip

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.

Because it has to use WebKit transforms I have written it using JavaScript rather than jQuery – one of the many nice things about Adobe Edge Animate is the ability to mix and match languages and syntax to fit your needs.

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!

Chris Gannon Edge Animate Templates

 

 

 

 

 

Alternatively here’s a very old, basic version (but hey, it’s still free!) .

View the demo here

Download the source files here

28 thoughts on “3D Card Flip using Adobe Edge Animate and Greensock TimelineMax

  1. Interresting article, Chris!

    Greensock is a fantastic javascript animation framework that we need to push to front-end developers out there as I genuinely think it will change the way we work with animations in the future.

    I recently wrote a tutorial that will guide people into learning the besics, which I think might be valuable to your readers. Check out: Greensock JavaScript Animation.

  2. Greensock is as awesome as it has been when I used some of its features in Flash. That said although that’s the only way to accomplish 3D flipping such as that in the demo here, using heavy coding completely defeats the purpose of using Edge Animate.

    Mark, Sarah, Elaine, Joe, and many more have done a fantastic job in such a short time with Edge especially considering the many difficulties like somewhat limited resources, the many challenges that are always there when a standard that is not being controlled by Adobe and is constantly evolving across multiple browsers and Operating Systems. The whole team deserves a daily shower of kudos… but hopefully, in time, what was accomplished in this demo via external coding will be something that Edge Animate will allow to build visually via UI driven authoring. For the moment though thanks for sharing the example! 😀

  3. @tfbkny

    Whilst this is by no means the only way to do a 3D flip in HTML (you could accomplish this with WebKit CSS transitions for example) I definitely agree with you that Edge Animate was never designed to be used for heaving coding – the relatively basic editor is testament to that.

    However as someone who is a designer AND a coder (and used to the Flash IDE) I find it a perfect environment in which to experiment – it would take me much longer to accomplish some of my demos and tests if I were just using a text editor. I imagine a pure developer may not feel all that comfortable in Edge Animate partly because there’s a timeline and timelines frighten the heavily left-brained among us (!) and also because it lacks features a pure developer is used to.

    So yes, you’re right in terms of what it was originally designed to do. But there are and will always be people who find new or alternative uses for things to suit their requirements and in my opinion that can often be where innovation lies.

    Thanks for your thoughts – I really do appreciate all feedback and opinions.

    Happy tweening!

  4. Hi there, noob here. The demo link works peachy, but when I unpack the zip and run the html it doesnt work in FF. The same FF the demo link worked fine in?

    Id also like to figure out where I can set the animation speed?

    Thanks a bunch for all your work!

    Cheers,
    Pete

    1. Are you running it from a server or the file system?

      You can change the animation speed by either changing the tween durations or if it’s in a timeline you can use the timeScale property where 1 is normal speed, 2 is twice the speed etc.

      HTH.

      1. I tried uploading to the server, unchanged (www.michaelas.co.za/test) and running from the filesystem. Works great in Chrome, wont in FF (18.0.2). But your demo link works fine! Im stumped!

        – Pete

      2. Ok I appear to have missed out the Mozilla prefixes in the downloadable ZIP.

        I have updated it now so you can just download it again and tell me how it goes.

        For reference where you see the WebKit line:

        parent.style.webkitPerspective = value;

        I’ve added in:

        parent.style.MozPerspective = value + “px”;

        Similarly for this line:

        target.style.webkitTransform = ry;

        Add in:

        target.style.MozTransform = ry;

        etc

  5. Awesomeness! Thanks!

    On another note: What I am trying to accomplish is a logo where the letters turn one by one, forming the logo eventually. So Ive made two images for each letter, one blank and one with the letter on it. It works beautifully with one letter now, but I need to somehow repeat the process with the other letters. Now I can of course just make 8 separate animations and place them next to each other, but Ive got a sneaky suspicion there is a more elegant solution. Is there any way you could point me in the right direction?

    Again, thanks a million for all of this, because of your great comments I am really expanding on my skillset here.

    -Pete

    1. If your word has 3 letters then create an image of each one, give them all instance names like ‘name0’, ‘name1’ etc and line them in their final positions.

      Next create a TweenMax instance, pass in an array of your images and code your animation something like :

      TweenMax.staggerFrom([‘name0’, ‘name1’, ‘name2’], 3, {css:{alpha:0, rotationY:-180}, 0.2});

      This will tell all of your images to start with an alpha value of 0 and a rotationY value of -180. They will then rotate for 3 seconds each on their Y axis with an interval/spacing of 0.2 secs.

      Check out the GSAP JS docs for more info.

      http://api.greensock.com/js/

  6. Very nice,
    But when you leave it open in a tab, go away and come back to the tab later the images and text are flipped horizontally in chrome and safari.

  7. @mr c
    This demo was created quite a while ago now so try using the very latest Greensock libraries – that should hopefully solve it.

  8. Hi Chris, very nice effect.
    Is it possible to add a trigger (ex a tap) to start the flip? I would use Adobe Edge to do this, but I think it is not possible because the animation sequence is already completed via code. Please let me know.
    Thanks again.

      1. Many thanks Chris.
        The new version is amazing.
        I don’t know much about coding…sorry can you tell me how I can download all necessary files (and modify the .html) in order to use this script in a DPS pubblication? I need all files (.js) in local.
        Thanks again

    1. It works well in Firefox but in IE the back face of the card never displays because the card faces are nested inside a container DIV and ‘preserve-3d’ (which is applied to the container) is STILL not supported in IE.

      However the work around is to hide the front face and show the back face when the flip hits its halfway point on rotationY.

  9. Chris

    It`s a great templete animation! but i’m wondering if there is any form to make an edge animate flipbook animation? the thing is that i need to make one, and i can`t find the from or way how to make it, can you help me?

    1. When you say flip-book animation do you mean hundreds of 3D pages that flip like a book with animation frames on them?

      1. You would need to use Greensock GSAP in order to create the 3D although the pages would look stiff (they wouldn’t look like they were bending like real pages would if you were flicking through them with your finger).

  10. Perfect Chris! thank you for your help, i will check it out hoping i will be able to make it.

    Greetings!

    1. Ensure that the timeline is paused at the start:

      timeline = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1, paused:true});

      Then your click function is something like this:

      myButton.onclick = function(){
      timeline.play();

      };

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s