Smoothstate.js Reverse Animation is not working

Question

I tried to embed the smoothState.js into my project, but for any reason the reverse/toogle/exiting animation won’t work. I really have no more ideas and i couldn’t find a solution on stackoverflow or something else.

My codes:

HTML:

 <div id="main" class="m-scene">
      <!-- Classes that define elment animations -->
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
      <div class="scene_element scene_element--fadeinright">
            <p>Home to the boy</p>
      </div>
 </div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.smoothState.js"></script>
<script src="js/functions.js"></script>

CSS:(linked to the css files, included in the package of smoothstate)

JS:

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        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');
});

I really hope someone can help me to get this thing working :)

Thank you in advance.

Answer 1

Try removing $container.removeClass('is-exiting'); from the onReady Render function and instead append this to your options:

onAfter: function($container) { $container.removeClass('is-exiting'); }

The onAfter function is called once everything is loaded into the page and seems to help when coordinating animations.

Answer 2

I discovered that the timing was off when I ran into this issue. Maybe the duration of your animations is actually longer than the 250ms that you've set in the JS you posted. Try increasing that to 1000. Also: Do you have a class called is-exiting with your animations? If not, maybe change is-exiting to scene_element--fadeinright and adjust the duration in your JS to coincide with your CSS accordingly. Best.

Answer 3

From Github:

There is few things for anyone to pay attention, such as following:

• the onEnd on the demo is deprecated, change it to onReady/onAfter (this solve one problem)
• don't try it on local development, upload it to server and try it instead. _ somehow put the file before closing is better instead of on the top (head area).

Read Source.