SmoothState.js and FullPage.js is not working well together

Question

I spent like 3 hours now, and couldn't move an inch in right direction.

Here is my Javascript,

jQuery(document).ready(function($){

'use strict';
var $page = $('#fullpage'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        scroll: false,
        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() {
            initMap();
            fullPage();
            logoAnim();

        }
    },
smoothState = $page.smoothState(options).data('smoothState');


function fullPage() {
    $('#fullpage').fullpage({
        autoScrolling: false,
        fitToSection: false,
        navigation: true,
        navigationPosition: 'left',
        showActiveTooltip: false
    });
};

fullPage();
    function logoAnim() {
    $( window ).scroll( () => {
        if(window.pageYOffset > 20){
            $('#logo').addClass('play');
        } else {
            $('#logo').removeClass('play');
        }
    });
};

logoAnim();

})

So here is the problem. I saw this comment on the documentation

Help! My $(document).ready() plugins work fine when I refresh but break on the second page load. smoothState.js provides the onAfter callback function that allows you to re-run your plugins. This can be tricky if you're unfamiliar with how AJAX works.

I have exactly this problem, however I added the onAfter to the code. I'm still getting

jquery.fullpage.js:1053 Uncaught TypeError: Cannot read property 'top' of undefined at isCompletelyInViewPort (jquery.fullpage.js:1053) at scrollHandler (jquery.fullpage.js:967) at dispatch (jquery-3.2.1.js:5206) at elemData.handle (jquery-3.2.1.js:5014)

This doesn't make any sense to me. Issue is caused by Smoothstate but error is happening on Fullpage.js and when I put a console log to the function of Fullpage.js I get the log but on the second page function doesn't work because of this error.

EDIT: I just put it in my hosting and I'm also getting this now.

main.js:39 Uncaught TypeError: $(...).fullpage is not a function
at fullPage (main.js:39)
at Object.onAfter (main.js:30)
at HTMLDivElement.<anonymous> (jquery.smoothState.min.js:9)
at HTMLDivElement.e (jquery.min.js:3)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLDivElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)

You can find the staging http://artticfox.com/new_site/ . Only Istanbul cafe link is functional at the moment.

Thanks alot if you can help me out.

Answer 1

$(...).fullpage is not a function

That's because you are not importing fullpage.js at all. Check your source: http://artticfox.com/new_site/js/jquery.fullpage.js

Also, make sure to use the latest fullpage.js version 2.9.4 and in case you are using anchors for SmotthState, then you should be using lockAnchors:true in fullPage.js so they won't have any effect in it.