Smoothstate.js - Loading specific stylesheets and scripts through functions.php not working

Question

I'm wondering if someone could help me please. I'm currently using the Smoothstate.js plugin to transition between pages on my Wordpress website. So far the plugin works great and does the majority of what i want it to do.

However, when I try and load separate files for individual pages via the functions.php file in Wordpress, when I navigate between pages some of the scripts aren't working.

I have made sure the scripts are loaded in the container so Smoothstate.js knows what files have been added and I have also re init the functions using the onAfter function.

It's weird because when I check the DOM after navigating the pages, I can see the scripts being loaded in but then If i check the sources tab in the dev tools they don't appear?

I need to be able to specifically load seperate files depending on what page you're on for performance reasons so I'm hoping there's a way of doing this without conflicting with Smoothstate.js. Does anyone have any experience with this or know of an answer?

My setup is like so:

Functions.php

As you can see I only want Google maps to load on the contact page.

  wp_enqueue_script( 'anime-script', get_stylesheet_directory_uri() . '/js/anime.min.js', array(), $the_theme->get( 'Version' ), true);
    wp_enqueue_script( 'scrollMonitor-script', get_stylesheet_directory_uri() . '/js/scrollMonitor.js', array(), $the_theme->get( 'Version' ), true);
    wp_enqueue_script( 'scroll-scripts', get_stylesheet_directory_uri() . '/js/scrollreveal.js', array(), $the_theme->get( 'Version' ), true );
    wp_enqueue_script( 'type-script', get_stylesheet_directory_uri() . '/js/typed.min.js', array(), $the_theme->get( 'Version' ), true);

    if(is_page('contact-us')) {
        wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC5_sL4wf3GIEgwI7bUXWD4pqkkc8er7tQ', array(), $the_theme->get('Version'), true);
        wp_enqueue_script( 'google-maps-settings', get_stylesheet_directory_uri() . '/js/google-maps.js', array(), $the_theme->get( 'Version' ), true);
        wp_enqueue_script( 'contact-slider', get_stylesheet_directory_uri() . '/js/contact-slider.js', array(), $the_theme->get( 'Version' ), true);
    }

Smoothstate js

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

    function init() {
      ImageSliders();
      navbarColour();
      typedBanners();
      scrollingAnimations();
      navBarHide();
      animateOnLoadPosition();
      openSubscribePanel();
    };

    $(document).ready(function() {
      'use strict';

      addBlacklistClass();

      // Init here.
           var $body = $('body'),
               $main = $('#page'),
               $site = $('html, body'),
               transition = 'fade'


      var options = {
        prefetch: true,
        cacheLength: 2,
        debug: true,
        blacklist: '.wp-link, .open-panel-link',

        onBefore: function($anchor, $container) {
                    var current = $('[data-viewport]').first().data('viewport'),
                        target = $anchor.data('target');
                    current = current ? current : 0;
                    target = target ? target : 0;
                    if (current === target) {
                        transition = 'fade';
                    } else if (current < target) {
                        transition = 'grow';
                    } else {
                        transition = 'moveleft';
                    }

                  var highResImageUrl = $anchor.find('.thumbnail-holder').data('src');
                  var thumbnailholder = $anchor.find('.thumbnail-holder');
                  var newImage = $anchor.closest('.thumbnail-wrapper').append('<img class="imageGrow" src="' + highResImageUrl + '">');
      },

        onStart: {
          duration: 1200, // Duration of our animation
          render: function (url, $container) {
            // Add your CSS animation reversing class
            $main.attr('data-transition', transition);
            $main.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() {

            init();
            addBlacklistClass();

              if (typeof contactSliderUI == 'function') {
                contactSliderUI();
              }

              $('.acf-map').each(function() {
                    // create map
                    map = new_map( $(this) );
                });


            var $hash = $( window.location.hash );

                    if ( $hash.length !== 0 ) {

                        var offsetTop = $hash.offset().top;

                        $( 'body, html' ).animate( {
                                scrollTop: ( offsetTop - 60 ),
                            }, {
                                duration: 280
                        } );
                    }
                }
      },
      smoothState = $('#page').smoothState(options).data('smoothState');
    });

Answer 1

You need to add <?php body_class ?> to your container or to another element inside your container (m-scene). Smoothstate is only handling what is inside the container, your classes on your <body> element will not change unless it's inside your "m-scene" container.