Menu
I have the html and css working fine with the most basic use of smoothState.js
;(function ($) {
$('#main').smoothState();
})(jQuery);
However even with this basic implementation if you select the link of the current page, (i.e. to reload the page) you will get a blank white screen with 2015 written in the top left corner. with this error there is No error recorded in console which makes me think it's an error handled by smoothState.js
If I expand on smoothState to allow for the more advanced options, (i.e. 'is-exiting') it now becomes impossible to navigate through the site, move off the page.
With the advanced implementation, shown at the end of this question I get the console error:
Uncaught TypeError: content.toggleAnimationClass is not a function main.js:134
$.smoothState.onStart.render @ main.js:134
load @ jquery.smoothState.js:533
clickAnchor @ jquery.smoothState.js:589
n.event.dispatch @ jquery.min.js:3
n.event.add.r.handle @ jquery.min.js:3
Here's the html:
<head></head>
<body>
<div id="main" class="m-scene">
<header id="header">
</header>
<div id="page_content_container" class="scene_element scene_element--moveUpIn">
<section class="about-intro-container">
</section>
<section class="about-services-container">
</section>
<section class="about-randomBits-container">
</section>
<footer>
</footer>
</div><!-- #page_content_container -->
</div><!-- #main -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.smoothState.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here's the smoothState relevant css:
/* prefixes are just missing here, I have them in my file */
.m-scene .scene_element {
animation-duration: .5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.m-scene .scene_element--moveUpIn {
animation-name: moveUp, fadeIn;
}
.m-scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
@keyframes moveUp {
0% {
transform: translateY(100%)
}
100% {
transform: translateY(0%)
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
And here's the more advanced smoothState:
;(function($) {
'use strict';
var $body = $('html, body'),
content = $('#main').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);
Eventually I plane to add prefetch, pageCacheSize etc... and implement different transition depending on what page your are loading/exiting. However at this time it doesn't seen worth moving forward until I can resolve the above issues.
Any ideas or assistance is welcome and very much appreciated, Thanks.
Oh I just got this error also
XMLHttpRequest cannot load file:///Users/Parallelos/Developer/paralellos.github.io/projects.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
n.ajaxTransport.k.cors.a.crossDomain.send @ jquery.min.js:4
n.extend.ajax @ jquery.min.js:4
fetch @ jquery.smoothState.js:355
load @ jquery.smoothState.js:529
clickAnchor @ jquery.smoothState.js:589
n.event.dispatch @ jquery.min.js:3
n.event.add.r.handle @ jquery.min.js:3
805
I dealt with this exact same issue. If you download the demo's and go through their 'functions.js' you'll notice a different way of handling the exiting css class. Here is that code, have tested it and it works for me.
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
