SmoothState. js - анимация включается только после одного деления

Question

Я не эксперт в кодировании, потому что я графический дизайнер. В моей теме Wordpress все работает хорошо, но когда я вызываю ссылку, анимация запускается на всех блоках, где есть анимация, а не только на втором div (и заголовок остается неизменным со второй страницы). На самом деле оба div-а выдвигаются, потому что я не знаю, как назначить сдвиг только классу site-main, а не оболочке-navbar.

Заранее спасибо

в html:

<div id="main" class="m-scene">
...
  <div id="wrapper-navbar " class="scene_element scene_element--fadein">
...
    <main class="site-main scene_element scene_element--fadeinup" id="site-main">
...

в js:

jQuery(function(){
  'use strict';

  var options = {
    debug: true,
    anchors: 'a',
    blacklist: 'no-ajax',
    prefetch: true,
    prefetchOn: 'mouseover touchstart',
    cacheLength: 5,
    forms: 'form',
    onStart: {
      duration: 250, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');
        $container.addClass( 'slide-out' );

        // 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($container, $newContent) {
    duration: 250,
            // once content has loaded, loading overlay can fade out
            $container.removeClass( 'slide-out' );
        }
  },
  smoothState = jQuery('#main').smoothState(options).data('smoothState');
  jQuery('#main').smoothState({ debug: true });
});

в css:

.m-scene .scene_element {
  animation-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
}
.m-scene .scene_element--fadein {
    animation-name: fadeIn;
  }
.m-scene .scene_element--fadeinup {
  animation-name: fadeInUp;
}

.m-scene.is-exiting .scene_element {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
}
#main {
    -webkit-transition: -webkit-transform 0.58s, opacity 0.58s;
    -ms-transition: -o-transform 0.58s, opacity 0.58s;
    -o-transition: -o-transform 0.58s, opacity 0.58s;
    transition: transform 0.58s, opacity 0.58s;
}
.slide-out {
    -webkit-transform: translate3d( 0, 50px, 0 );
    -ms-transform: translate3d( 0, 30%, 0 );
    -o-transform: translate3d( 0, 30%, 0 );
    transform: translate3d( 0, 50px, 0 );
    opacity: 0;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/*
 * Keyframes
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}