Reinitializing page scripts after SmoothState.Js page change

Question

I am using SmoothState.js for page transitions and it works fine and loads the new pages with ajax. However, I have JS scripts on each page that need to be reinitialized and I h

Answer 1

I managed to get a separate function to run at the end of the code by moving your onAfter script into the main smoothstate function (remove the other smoothstate functions). Run your function on document ready as well in case of browser refresh. If it works the same with your code, it would be as follows:

$(document).ready(function() {
        mail();

    });

    function mail() {
        // script from mail.js goes here
    }

    $(function() {
        "use strict";
        var options = {
                prefetch: true,
                pageCacheSize: 3,
                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);


                    }

                },
                onAfter: function() {
                    mail();
                }
            },
            smoothState = $("#main").smoothState(options).data("smoothState");
    });