Estou tentando criar um efeito como este para o smoothstate:http://tympanus.net/Development/PageTransitions/, especificamente as transições "room".

Estou ficando paralisado ao tentar exibir as duas páginas ao mesmo tempo - quero que o novo conteúdo tire o antigo da tela.

segue muito código ... tudo funciona, mas aguarda até que o conteúdo antigo esteja fora da tela para começar a adicionar novo conteúdo

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    cacheLength: 10,
    onStart: {
      duration: 500, // Duration of our animation
      render: function ($container) {
        // scroll up
        $("html, body").animate({ scrollTop: "0px" });
        var element = $('.row', $container);

        // do animations
        $(element).animate({opacity : 0}, {
            duration: 500,
            easing: "linear",
            step: function(number, tween) {
                number = 1 - number;
                var element = document.getElementsByClassName('row')[0];
                element.style.transform = "translateX(-" + 45*number + "%) rotateY(" + 90*number + "deg)";
            }
        });
      }
    },
    onReady: {
      duration: 500,
      render: function ($container, $newContent) {

        // Inject the new content
        $container.html($newContent);
        $container.css({overflow : 'hidden'});
        // do animations
        var element = document.getElementById($container[0].id).getElementsByClassName('row')[0];
        element.style.opacity = 0;
        $(element).animate({opacity : 1}, {
            duration: 500,
            step: function(number, tween) {
                number = 1 - number;
                var element = document.getElementsByClassName('row')[0];
                element.style.transform = "translateX(" + 45*number + "%) rotateY(-" + 90*number + "deg)";
            }
        }); 

      }
    }
  },
  smoothState = $('#main').smoothState(options).data('smoothState');
});

Eu teria pensado que mudar aonStart duração menor que a duração da animação funcionaria, mas apenas reduz a animação, deixando uma tela em branco.

Estou ciente de que$container é usado para ambos, mas acredito que posso consertar isso com$container.clone(); para manter o conteúdo antigo enquanto ele sai da página.

Minha pergunta: existe uma maneira de acessar $ newContent além de esperar poronStart completar?

Nota: o mesmo comportamento ocorre nas animações CSS - elas terminam no final deonStart.