javascript - SmoothSate.js issue
I'm trying to boost my online store's performance by using SmoothState.js. It work's very well, until I come to the part in the tutorial (http://miguel-perez.github.io/smoothState.js/typical-implementation.html) where I'm working on the functions.js file.
What happens when the function.js file is added, is that some links get unclickable... For example when you click 'skin care' and the nav opens, you can't click any of the links. You can't click the links in the footer either. The file includes the following:
// Contents of functions.js
;(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);
Demo here (http://eldecosmetics.com/). Password: pruget
Answer
Solution:
.toggleAnimationClass(); no longer works because it is depreciated. instead, you want to add the class ononStart then.restartCSSAnimations(); then remove the classonReady. Here's the update to date method that he has on his github page.
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
blacklist, '.dropdown' //class is on <a> that don't go to another page
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 = $('#main').smoothState(options).data('smoothState');
});
Lastly, You talked about opening a nav, like a dropdown or mega menu. Any anchor tag that does not have a full URL will break. To tell SmoothState to ignore those, add the class to theblacklist parameter.
Source
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.