Does smoothstate.js not work with different background images?

Question

I'm working on creating a smooth transition from my intro page to my home page as you can see here http://trial.kareemhackett.com so I used smoothstate.js but I can't get it to smoothly transition between pages and I feel like it's because I have images as the background which is unlike any of the demos. But in hope that this may not be the case I brought it here. Maybe it's because I'm using bootstrap?

This is my code for it here. I've also tried reveal.js although that's a little different I just need to incorporate smooth transitions.

Any help is greatly appreciated.

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        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);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

.intro {
  background: url(img/headerbg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: middle;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

.inner {
  padding: 30px;
}

.cover {
  padding: 0 20px;
}

    <div id="main" class="m-scene">
      <div class="scene_element scene_element--fadeinright">
        <div class="intro">
          <div class="site-wrapper">

            <div class="site-wrapper-inner">
              <div class="cover-container">
                <div class="inner cover">
                  <a class="center-block" href="newhome.html" data-transition="fade"><img class="img-responsive" src="img/Bang_logo.png"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

It doesn't look like you have any animations defined with CSS. So m-scene, scene_element, scene_element--fadeinright, and is-exiting aren't doing anything.

smoothState.js seems to be working, though, it's replacing the content via ajax and adding in the is-exiting class as specified.

Answer 2

As far I could see, you're missing the CSS animations, and half the time I get a 404 on jquery.smoothState.js.

I'm sure Bootstrap does not have anything to do with it, because I'm using Bootstrap to make a site with transitions and background images, similar to you, and I have it functioning.

You're welcome to check out the code if you like, it's documented best I can: http://alex-oconnell.com/client/aarmour/