content.toggleAnimationClass(); is not a function

Question

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

where is `toggleAnimationClass` definition.. I think it is not done as a plugin function — Arun P Johny, Aug 11 '15 at 04:05
@ArunPJohny I just assumed it was defined in `jquery.smoothState.js` given `toggle()` is jQuery method and `toggleAnimationClass()` is used in the documentation, [Add page transitions to your site](http://miguel-perez.github.io/smoothState.js/typical-implementation.html). Have you used it? How have you or others implemented `toggleAnimationClass()`? — Mudlabs, Aug 11 '15 at 04:53

score 12 · Answer 1 · answered Aug 23 '15 at 17:47

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');

});

score 0 · Answer 2 · answered Aug 11 '15 at 05:12

0

I think that method is removed, not to restart animation try

content.restartCSSAnimations()

answered Aug 11 '15 at 05:12

Arun P Johny

384,651
66
527
531

That seems to have improved the situation some. with `restartCSSAnimations()` I can now move around the site. However I believe the idea behind `toggleAnimationClass()` was to dynamically add the `.is-exiting` animation so the page transition would run on the current page exiting. Under this `restartCSSAnimations()` use the current page just vanishes, then the new page transitions in. Also If I click the current page link I still get that blank white page with _2015_ written in top left corner. – Mudlabs Aug 11 '15 at 05:27
@Paralellos I haven't used the plugin before.. but just went through the code and found this method.. but in the current code base I'm not able to find the `toggleAnimationClass` method... may be support for the same is removed? – Arun P Johny Aug 11 '15 at 05:30
Yeah I see it. That's strange. So do you think they just haven't updated the examples to show this new method? – Mudlabs Aug 11 '15 at 05:39
@Paralellos looks like that... the code used in the example has the method.... http://miguel-perez.github.io/smoothState.js/javascripts/all.js .. if you want you can try to extract the plugin code from the attached js file – Arun P Johny Aug 11 '15 at 06:05

content.toggleAnimationClass(); is not a function

2 Answers2

Linked