Image/DIV animation + event chaining

Question

I'm struggling with an animation I need for the site I'm working on and I'm hoping that someone here can help. Here's the situation: the client wants the index page of the site to be a "vault" that opens up when the "enter" link is clicked, and it needs to be a very specific design which I'll try to describe as I'm new and can't post images. The screen is divided vertically with the left side being DIV-b and the right side being DIV C. Floating on top is DIV-A which contains a round image, or the lock of the vault, if you will.

#DIV-B {
position:relative;
top:0px;
width:50%;
float:left;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-left.jpg);
background-position:right;
overflow:hidden;
}

#DIV-C {
position:relative;
top:0px;
width:50%;
float:right;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-right.jpg);
background-position:left;
overflow:hidden;
}

#DIV-A {
position:relative;
top:150px;
margin:0 auto;
z-index:3;
margin:0 auto;
}

I've already got the image broken up and the DIVs aligned properly; what needs to happen is that when the "enter" link is clicked (in DIV-A), the image in DIV-A (or the DIV itself) will rotate 180 degrees degrees clockwise, followed immediately by DIV-A and DIV B sliding off to the left with DIV-C sliding off to the right, revealing another DIV (D, I guess) below that.

I'm assuming that jQuery animation and perhaps Mootools chaining is the way to go, but honestly this sort of thing is a bit new to me so I'm hoping that someone might be able to help me lay it out. Thanks in advance for any help!

Answer 1

You can script this by hand using jQuery animation, but it will be a lot of work. Fortunately HTML5 animation authoring tools are starting to appear on the market that are worth looking at.

http://labs.adobe.com/technologies/edge/

http://www.sencha.com/products/animator

Answer 2

I would use a combination of jQuery and CSS3 keyframe animations... although it won't work in IE8 and under. I haven't tested this but in theory it should work. Let me know if it needs modification.

.open-lock { transform: rotate(180deg) }
.slide-left { left: -1000px }
.slide-right { right: -1000px }
#DIV-A, #DIV-B, #DIV-C, .open-lock { transition: all 3s ease-in-out }

And the jQuery

$('#enter-link').click(function(){
    $('#DIV-A').addClass('open-lock');

    setTimeout(function(){
        $('#DIV-B').addClass('slide-left');
        $('#DIV-C').addClass('slide-right');
    },3000)
});

Explanation: when you click the link with ID "enter-link", a class "open-lock" is added to #DIV-A which will rotate with CSS to 180 deg. This animation will take 3 seconds. Simultaneously a setTimeout() function has been set for 3 seconds, which will execute right after the rotation is complete. This function adds classes to DIVs B and C which will cause their relative positioning to change, sliding them out of the viewport.

You can set separate transition properties on the different DIVs if you want their animations to last longer or shorter.

You can add the browser specific prefixes as well if you want some backwards compatibility with older versions of firefox and safari. -moz-transition: , -webkit-transition: , and the same for transform.