How to use @keyframes for smooth page transitions without breaking jquery animations

Question

I'm trying to get my website to have the capability to transition between its pages smoothly like in this demo . Working off of the plugin they use, jquery.smoothState.js , I tried to get it to work with no results. Finally I just copy/pasted the demo's HS file and removed the things I didn't need.

Now I have my divs transition onto the page, when I click a link they transition off of the page, but I'm then stuck in an infinite load state because I keep getting the error: "TypeError: html.replace is not a function" which references line: 138 in my JS file. I'm seeing this by using the "inspect element" feature in Firefox and looking at the console.

The line producing the error is identical to the one on the demo site. The only difference is that I'm getting an error and the demo doesn't. If I remove (in reference to my JS file) lines: 138-150 the error goes away and the desired animations run successfully for one circuit (go from home page to alt page and back). Once back on the homepage, the link is changed to take me from the home page to the home page instead of the alt page.

Why am I getting this error and the demo site isn't? And is there anyway I can make this work?

Pastebin links to my code:

HTML (Main Page)

HTML (Alt Page)

CSS (Animation Collection)

CSS (Formatting)

Javascript (Contains jquery.js, jquery.smoothState.js, and smoothState settings at bottom)

The Demo Site

jquery.smoothState.js Download Page

EDIT: Lines: 133-172 in my js file (part of jquery.smoothState.js code): (Error at line: 138)

133 htmlDoc: function (html) {
134     var parent,
135         elems       = $(),
136         matchTag    = /<(\/?)(html|head|body|title|base|meta)(\s+[^>]*)?>/ig,
137         prefix      = 'ss' + Math.round(Math.random() * 100000),
138         htmlParsed  = html.replace(matchTag, function(tag, slash, name, attrs) {
139             var obj = {};
140             if (!slash) {
141                 elems = elems.add('<' + name + '/>');
142                 if (attrs) {
143                     $.each($('<div' + attrs + '/>')[0].attributes, function(i, attr) {
144                         obj[attr.name] = attr.value;
145                     });
146                 }
147                         elems.eq(-1).attr(obj);
148             }
149                     return '<' + slash + 'div' + (slash ? '' : ' id="' + prefix + (elems.length - 1) + '"') + '>';
150         });
151
152             // If no placeholder elements were necessary, just return normal
153             // jQuery-parsed HTML.
154             if (!elems.length) {
155                 return $(html);
156             }
157             // Create parent node if it hasn't been created yet.
158             if (!parent) {
159                 parent = $('<div/>');
160             }
161             // Create the parent node and append the parsed, place-held HTML.
162             parent.html(htmlParsed);
163             
164             // Replace each placeholder element with its intended element.
165             $.each(elems, function(i) {
166                 var elem = parent.find('#' + prefix + i).before(elems[i]);
167                 elems.eq(i).html(elem.contents());
168                 elem.remove();
169             });
170 
171             return parent.children().unwrap();
172 },

Edit: Lines: 574-590 in my js file (smoothState Settings):

;(function ($) {
    'use strict';
    var $body    = $('html, body'),
        content  = $('#main').smoothState({
            prefetch: true,
            pageCacheSize: 4,
            onStart: {
                duration: 250,
                render: function (url, $container) {
                    content.toggleAnimationClass('is-exiting');
                    $body.animate({
                        scrollTop: 0
                    });
                }
            }
        }).data('smoothState');
})(jQuery);

Answer 1

The problem is that .replace belong to the String prototype . You are getting TypeError: html.replace is not a function because html is not a string.

To fix this, you should cast html to a string and then perform the necessary .replace operation:

var htmlParse = html.toString().replace(/* etc */);