Smoothstate.js simultaneously show to new and old

Question

This is a reference to the answer provided here: Is it possible to show both the new and old pages simultaneously?. I am attempting to display the old content while the new content slides in.

I added the solution to my files but the tempWrapper isn't being removed onStart, which is causing overlapping content. I believe it's something with the elements I am selecting but any assistance is appreciated!

HTML structure

<div class="scene" id="main">
    <!-- Navigation links here -->
    <div id="content" <?php body_class(); ?>>
        <div id="inner-content" class="row">
            <main class="large-12 medium-12 columns" role="main">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <?php get_template_part( 'parts/loop', 'page' ); ?>
                <?php endwhile; endif; ?>
            </main> <!-- end #main -->
        </div> <!-- end #inner-content -->
    </div> <!-- end #content -->
</div>

Here is my complete JS

$(function(){
    'use strict';
    var options = {
            prefetch: true,
            cacheLength: 10,
            onStart: {
                duration: 1000,
                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); // Immediately add the duplicate back on
                    $('#inner-content').removeClass('scene_element--fadeinright'); // Just in case we have the class still
                    var element = $('#inner-content', $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('scene_element')[0];
                    callAnimation(element);
                }
            },
            onAfter: function ($container) {}
        },
        smoothState = $('#main').smoothState(options).data('smoothState');
});

function callAnimation(element, exiting) {
    if (!exiting) {
        $(element).addClass("scene_element--fadeinright");
    } else {
        $(element).addClass('is-exiting');
    }
}

Answer 1

Try moving the $('#tempWrapper').remove(); from onStart to either onBefore or onAfter. I had the same issue and that's what worked for me.