Page Transition with CSS and jQuery

So found your solution, check it out here: http://transitiontest.comeze.com/

test1 = half page, test2 = full page, test3 = single page

In this example, there are two main objects: #main-page and #next-page, both share the same default properties except for their background color:`

height: 25px;
width: 375px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
background-color: #27ae60;
display: none;

I use position: absolute; and the margins to center the object. To hide it I set display to none;.

On page load, I first reset all the properties of the main object and fade it in as you can see below.

When .linkmain or .linknext gets clicked on, they both execute the same function but for a different object (main or next).

The function first fades out the text in the main object and makes this object shrink. After both of these are finished, the object rotates using a function to transition rotation.

After all of this is finished, the function fades out the object click on, to show the new object.

Next step, showing the new object:

Again, first I reset all the properties of the object and make it fade in.

Next, I change the background color of the object matching the one of the new object.

After this is finished, I animate the height, afther that the width, and at last fade in the content of the new object.

JS

// This function is used to transition rotation
$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

// Set all properties of main object to default and fade it in
$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();

// This gets activated once clicked on object .linkmain
$(".linkmain").on("click", function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(90);
    });

    // Hide the main object after all the animations above are finished
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);

    // Fade in the new page after all the animations above are finished
    setTimeout(function() {
        $("#next-page").animateRotate(0, 0);
        $("#next-page").css("height", "25px");
        $("#next-page").css("width", "375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            backgroundColor: "#27ae60"
        }, function() {
            $(this).animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: $("body").width()
                }, function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    }, 800);
});

// This gets activated once clicked on object .linknext 
$(".linknext").on("click", function() {
    $(".nextcontent").fadeOut();
    $("#next-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(-90);
    });

    // Hide the next object after all the animations above are finished
    setTimeout(function() {
        $("#next-page").fadeOut();          
    }, 1500);

    // Fade in the main page after all the animations above are finished
    setTimeout(function() {
    $("#main-page").animateRotate(0, 0);
    $("#main-page").css("height", "25px");
    $("#main-page").css("width", "375px");
        $("#main-page").fadeIn();
        $("#main-page").animate({
            height: "100vh"
        }, function() {
            $(this).animate({
                width: $("body").width()
            }, function() {
                $(".maincontent").fadeIn(300);
            });
        });
    }, 1400);
});