Is it possible to show both the new and old pages simultaneously?

Question

I\'m trying to build an effect like this for smoothstate: http://tympanus.net/Development/PageTransitions/, specifically the \"room\" transitions.

I\'m getting stuck

Answer 1

Hope you still need it. That's how I implemented this:

$(function () {
    //'use strict';
    var $page = $('.m-scene'),
      options = {
          debug: true,
          onStart: {
              duration: 0,
              render: function ($container) {

                  $('.m-page.temp').remove(); //make sure we don't have more than two `pages` at a time
                  $('#move').removeClass('slideup'); //remove old animation; #move is the wrapper for original and injected content
                  $container.find('.m-page').addClass('temp'); //mark original content for removal
              }
          },
          onReady: {
              duration: 50, //prevents flickering of content 
              render: function ($container, $newContent) {
                  $('#move').append($newContent.find('.m-page')); //select only stuff you actually need injected
              }
          },
          onAfter: function ($container, $newContent) {
                var target = $('#move');
                animate(target); //it's animation time!
          }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

function animate(target) {
    target.addClass('slideup'); //add animation class
}

Answer 2

Yes. The trick is to use setTimeout(,0) to run the animation. I ended up moving the animations to a CSS class for simplicity. This may be laggy on long pages due to content duplication (facebook, youtube, etc.)

It immediately returns from the onStart handler, but runs the animation through to the end. It calls onReady when ready and starts the entry animation.

[...]
onStart: {
  duration: 0,
  render: function ($container) {
    $('#tempWrapper').remove(); //if we have the temp wrapper, kill it now.
    $("html, body").animate({ scrollTop: "0px" });

    //make a duplicate container for animation...
    var $newContainer = $container.clone();
    $newContainer.attr("id", "tempWrapper");
    $newContainer.css({position:'absolute', top:$container.offset().top, width:$container.css("width")});
    $container.css({height:$container.css("height")});
    $container.empty(); //empty the old content so that it takes up 0 space
    $container.before($newContainer); // and immediately add the duplicate back on
    $('.row').removeClass('entering'); // just in case we have the class still
    var element = $('.row', $newContainer);
    setTimeout(callAnimation(element, true), 0); //start the animation
  }
},
onReady: {
  duration: 0,
  render: function ($container, $newContent) {
    // Inject the new content

    $container.html($newContent);

    // do animations
    var element = document.getElementById($container[0].id).getElementsByClassName('row')[0];

    callAnimation(element);
  }
}
[...]

function callAnimation(element, exiting) {
    if (!exiting) {
        $(element).addClass("entering");
    } else {
        $(element).addClass('exiting');
    }
}