Smoothstate: simoultaneously show old and new content for smooth page transitions

Question

I´m using smoothState.js for page transitions on a wordpress project. To built similar transitions as seen here, it´s necessary to see both the new and old content simoultaneously. According to the solution provided here, i have to clone the current smoothstate container.

Just as in this answer, i run into the same issue to have overlapping content. For example: If i navigate from Page1 to Page2, the clone of Page1 is not fading out but still visible. If i then navigate to Page3, the clone from Page1 is immediately removed (before animate.scrollTop). But then on Page3 there is also the clone of Page2 visible, and so on.

The author assumed selecting-mistakes as the reason for this behaviour, but i don´t know what i´m doing wrong.

Here´s my html structure:

<body <?php body_class(); ?>>
    <div id="main1" class="m-scene">
        <!-- Navigation links here -->
        <div class="sceneElement">
            <!-- Here is my content -->
        </div> <!-- end sceneElement -->
    </div> <!-- end #main1 -->
</body>

Here is my .js

jQuery(function(){
    'use strict';
    jQuery(document).ready(function () {
        var $ = 'jQuery',
            $body = jQuery('body'),
            $main = jQuery('#main1'),
            $site = jQuery('html, body'),
            smoothState;
        smoothState = $main.smoothState ({
                debug: true,
                prefetch: true,
                cacheLength: 10,
                onStart: {
                    duration: 400,
                    render: function ($container) {
                        jQuery('#tempWrapper').remove(); // If we have the temp wrapper, kill it now.
                        $site.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
                        jQuery('.sceneElement').removeClass('sceneElement--fadeinright'); // Just in case we have the class still
                        var element = jQuery('#temWrapper', $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('sceneElement')[0];
                        callAnimation(element);
                    }
                },
                onAfter: function ($container) {

                },
        }).data('smoothState');
    });


}(jQuery));

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

And here is the .css

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene .sceneElement {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
}

.m-scene .sceneElement--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; 
}

.m-scene.is-exiting .sceneElement {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; 
}

Smoothstate: simoultaneously show old and new content for smooth page transitions

0 Answers0