Question

I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is “split in half”, then have the upper part slides up and the bottom part slides down, thus revealing the next page.

I have a small idea, but i dont seem to have the knowledge to get trough:

2 Canvas with display: none, each width width: 100%, height: 50%. – Check

Have the actual display be rendered into said canvas’s – I have not the slightest of ideas.

Ajax the next page in a div below both canvas’s – Check

Slide the canvas’s in the respective directions – Check

Set the canvas’s to display: none and restore them to their original positions – Check

Any thoughts? I’m open to use any other framework appart from jQuery, if that’s the need. I am also open to change my canvas idea into something else.

EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application’s workflow ends at the last screen, as there will be no back button.

Answer 1

I’m pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I’d dump the canvas idea. I don’t think that there’s an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it’s not 100% accurate when it comes to rendering things like this.

As an alternative, I’d recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like “step-wrap” or “step-container”). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.

Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.

Essentially, what you need to do is:

1. Duplicate the div
2. Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
3. Animate the top div up, bottom div down

Here’s a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.