Initializing sequence after ajax injection / dynamic page

[johanneslamers]

I'm using SmoothState on a website. Most of the content will be injected with ajax. SmoothState provides me with some hooks:

• onBefore - Runs before a page load has been started
• onStart - Runs once a page load has been activated
• onProgress - Runs if the page request is still pending and the onStart animations have finished
• onReady - Run once the requested content is ready to be injected into the page and the previous animations have finished
• onAfter - Runs after the new content has been injected into the page and all animations are complete

For testing I'm using your test theme with the detroy and init buttons. It works just a normal with a regular page load. With the 2 buttons I can manually destory and init sequence.js. But not after an ajax injection. What am I doing wrong?

function initSequence() {
    if ($('#sequence').length) {
        mySequence = sequence(sequenceElement, sequenceOptions);
        console.log("init Sequence");
    };
}

function destroySequence() {
    if ($('#sequence').length) {

        if (mySequence !== undefined) {
            mySequence.destroy();
            mySequence = undefined;
        }
        console.log("destroy Sequence");
    };
}

$("#init").on('click', function() {
    initSequence();
});

$("#destroy").on('click', function() {
    destroySequence();
});


.... // smoothState setup

    onAfter: function ($container, $newContent) {
        initPage();
    },
    smoothState = $page.smoothState(options).data('smoothState');

... // etc etc smoothState setup


var initPage = function() {
    initSequence();
};


$(document).ready(function() {
    initPage();
});