Getting smoothState.js and Foundation 6 to work together

Question

I'm working on a Foundation 6 project and am trying to make it work with smoothState.js.

I managed to get smoothState itself to work, but now Foundation appears to be broken. Specifically, the page loads correctly when you first load it or click the reload button, but clicking links to navigate appears to break the layout. My guess is that it's because $(document).foundation(); only runs when the page loads.

I had tried to follow more general advice for js plugins like, Reinitializing page scripts after SmoothState.Js page change, and I tried https://gist.github.com/miguel-perez/476046a42d229251fec3, but neither resolved my issue. $(document).foundation('reflow'); doesn't work, either. I'm stuck!

It feels like I'm missing something, as I am a js neophyte.

Anyway, here's what I'm working with:

$(document).foundation();

$(function() {
  'use strict';
  var $page = $('#main'),
    options = {
      debug: true,
      prefetch: true,
      cacheLength: 2,
      onStart: {
        duration: 0, // Duration of our animation, was 250
        render: function($container) {
          // Add your CSS animation reversing class
          $container.addClass('is-exiting');
          // Restart your animation
          smoothState.restartCSSAnimations();
        }
      },
      onReady: {
        duration: 0,
        render: function($container, $newContent) {
          // Remove your CSS animation reversing class
          //            $container.removeClass('is-exiting');
          // Inject the new content
          $container.html($newContent);
        }
      },
      onAfter: function($container) {
        $container.removeClass('is-exiting');
        console.log('after');
        $(document).foundation();
      },
    },
    smoothState = $page.smoothState(options).data('smoothState');
});

Any help is appreciated! I cross-posted this on smoothState.js's GitHub page, under Issues.

Thanks!

EDIT

Ok, so I tried a bunch of snippets from the Foundation documentation, and I have something that half works.

The smoothState.js below reloads Foundation and fixes the layout, but the plugin in question, Foundation's Sticky, doesn't reset (i.e. doesn't become sticky). Even though entering $('.sticky').foundation('_calc', true); in the console fixes the plugin 100%, adding the same line to smoothState.js only half fixes the problem. No errors, either.

So close and yet so far! What am I missing? :)

// @codekit-prepend "jquery.smoothState.min.js";

$(document).foundation();

$(function () {
    'use strict';
    var $page = $('#main'),
        options = {
            debug: true,
            prefetch: true,
            cacheLength: 4,
            onStart: {
                duration: 0, // Duration of our animation, was 250
                render: function ($container) {
                    // Add your CSS animation reversing class
                    $container.addClass('is-exiting');
                    // Restart your animation
                    smoothState.restartCSSAnimations();
                    // alert('end of start');
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {
                    $container.html($newContent);
                    // alert('end of ready');
                    // console.log('Ready');
                }
            },
            onAfter: function ($container) {

                $container.removeClass('is-exiting');
                $(document).foundation();
                $('.sticky').foundation('_calc', true);
                // $('.sticky').foundation('_calc', true);
                // alert('end of onAfter');
                // console.log('onAfter');
            },
        },
        smoothState = $page.smoothState(options).data('smoothState');
}); 

LAST EDIT

Adding $(window).trigger('load'); suggested as a workaround here, seems to work. Can't help but wonder if there's a better solution?

Answer 1

I stumbled into your question few days ago while I was searching for answers myself. I made it work on my current site and since your question was posted on March, hopefully you have already found the answer.

Just in case you haven't found it, here's my answer.

You can initialize foundation in the smoothstate's "onAfter" function.

//PAGE TRANSITIONS WITH SMOOTHSTATE
$(function(){
'use strict';
var $page = $('#main'),
  options = {
    debug: true,
    blacklist : $('.photogallery a'),
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 250, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');
        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        // Remove your CSS animation reversing class
        $container.removeClass('is-exiting');
        // Inject the new content
        $container.html($newContent);
        // $container.onPageLoad();
      }
    },
    onAfter: function($container) {
        $(document).foundation();
// This is where you initialize foundation
        $container.onPageLoad(); // all other scripts inside this function          
    }
  },
  smoothState = $page.smoothState(options).data('smoothState');  

});