SmoothSate.js issue

Question

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 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. Password: pruget

`Uncaught TypeError: content.toggleAnimationClass is not a function` I guess content is not defined when you use it onStart. — andybeli, May 11 '16 at 14:14
@andybeli that's wierd because i'm just following the tutorial... hm — vemund, May 11 '16 at 14:25
http://stackoverflow.com/questions/31932989/content-toggleanimationclass-is-not-a-function - Try the alternative initialisation on one of the answers. — andybeli, May 11 '16 at 14:43

score 2 · Answer 1 · answered May 11 '16 at 20:07

.toggleAnimationClass(); no longer works because it is depreciated. instead, you want to add the class on onStart then .restartCSSAnimations(); then remove the class onReady. 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 the blacklist parameter.

Thanks! No problems with the effects or links now. But I can't get the reverse class to work though. On [this page I have an example](http://eldecosmetics.com/pages/about) that has an animated entry. Password: pruget. So when you click on 'makeup' in the menu, there is no reverse animations.. — vemund, May 12 '16 at 16:33

SmoothSate.js issue

1 Answers1