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

Vote count:

0

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 js 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 circut (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

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

asked 1 min ago

trunks470

27

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