Estoy tratando de construir un efecto como este para smoothstate:http://tympanus.net/Development/PageTransitions/, específicamente las transiciones de "sala".

Me estoy atascando al tratar de mostrar ambas páginas a la vez; quiero que el nuevo contenido elimine el viejo de la pantalla.

sigue un montón de código ... todo funciona, pero espera hasta que el contenido anterior esté fuera de la pantalla para comenzar a agregar contenido nuevo

$(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');
});

Hubiera pensado que cambiar elonStart la duración para ser más corta que la duración de la animación funcionaría, pero solo acorta la animación, dejando una pantalla en blanco.

Soy consciente de que$container se usa para ambos, pero creo que puedo arreglar eso con$container.clone(); para retener el contenido antiguo mientras se mueve fuera de la página.

Mi pregunta: ¿hay alguna forma de acceder a $ newContent que no sea esperaronStart ¿completar?

Nota: el mismo comportamiento ocurre con las animaciones CSS: terminan al final deonStart.