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.

I'm experiencing the same thing, I have no clue why it's not reversing, the #main not getting .is-exiting at all — Budi Tanrim, Jun 28 '15 at 17:34
Yeah, confused. I did everything like what the doc said, as well I can see on your code, we basically do the same thing, I do have is-exiting working now when I see my console. but doesn't do the reverse, maybe something with the css animation? — Budi Tanrim, Jun 30 '15 at 11:29
I really have no idea :/ I really want to know what we are doing wrong — Dennis, Jul 01 '15 at 12:02
I created the github issue thread : https://github.com/miguel-perez/smoothState.js/issues/190 - still waiting — Budi Tanrim, Jul 01 '15 at 17:51

score 0 · Answer 1 · answered Jul 07 '15 at 14:44

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.

score 0 · Answer 2 · answered Mar 16 '16 at 07:02

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.

score 0 · Answer 3 · answered Apr 19 '16 at 17:20

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.

Smoothstate.js Reverse Animation is not working

3 Answers3