SmoothState.js and FullPage.js Clashes

[BoraALAP]

They both work fine individually. However, when I put them together, it causes a problem.

The biggest one is jquery.fullpage@2.9.4(jquery.fullpage.extensions.min.js+jquery.fullpage.min.js):19 Uncaught TypeError: Cannot read property 'top' of undefined at Be (https://cdn.jsdelivr.net/g/jquery.fullpage@2.9.4(jquery.fullpage.extensions.min.js+jquery.fullpage.min.js):19:8035) at Re (https://cdn.jsdelivr.net/g/jquery.fullpage@2.9.4(jquery.fullpage.extensions.min.js+jquery.fullpage.min.js):19:7357) at dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:10316) at q.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:8343)

The second one is jquery.smoothState.min.js:9 Uncaught TypeError: l.onAfter is not a function 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) at r.fn.init.trigger (jquery.min.js:4) at jquery.smoothState.min.js:9

My Javascript is (function($) { jQuery(document).ready(function($){ function fullPage() { $('#fullpage').fullpage({ autoScrolling: false, fitToSection: false, navigation: true, navigationPosition: 'left', showActiveTooltip: false, }); }; function logoAnim() { $( window ).scroll( () => { if(window.pageYOffset > 20){ $('#logo').addClass('play'); } else { $('#logo').removeClass('play'); } console.log("runed second time"); }); }; $('#fullpage').smoothState({ debug: true, prefetch: false, cacheLength: 2, scroll: true, // onBefore: function($currentTarget, $container) { // // fullPage(); // }, 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(); console.log("load on start"); } }, onReady: { duration: 0, render: function ($container, $newContent) { // Remove your CSS animation reversing class $container.removeClass('is-exiting'); // Inject the new content $container.html($newContent); console.log("load on ready"); } }, onAfter:{ render: function($container, $newContent) { initMap(); fullPage(); logoAnim(); console.log("load on after"); } } }); fullPage(); console.log("load on page load"); }); }(jQuery));

Can you make the documentation little bit more detailed, Please? It is a great plugin, but soo functional for beginner coders I believe.

[BoraALAP]

Update: Found the problem but solution is beyond me, So I have to stop using one of the scripts for now.

Issue is with FullPage.js 's "autoScrolling: false," option. When I turn it to True. I don't get any error but page doesnt move at all. When I turn it to false, page can be scrollable but FullPage.js doesn't work and keeps throwing this error

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-2.2.1.min.js:3) at r.handle (jquery-2.2.1.min.js:3)

Not on the first page load but second page comes in with SmoothState.

Thanks,

[johnvndnbrk]

There are general issues with 3rd party libraries, i.e. AngularJS, Bootstrap.js, which require callbacks to reset the script. Not the best explanation but there several good ones on StackoverFlow and one, here, I believe to address AngularJS. Perform a more general search and you will see other libraries have issues similar to what you are experiencing and possible ways around them.

[zMastaa]

Disable fullpage using fn.fullpage.destroy('all') then re-enable it using smoothstate onReady/onAfter callback