Smoothstate.js .is-exiting reverse animation not firing

Question

I know this question has been asked in various places but I have yet to find an answer that works for my situation.

I'm using smoothstate.js to fire a series of animations when the page loads, and (hopefully) reverse the animations when the page exits.

Works great on page load but no luck on the reversing. The scroll to top doesn't seem to be working either.

Please see this fiddle: https://jsfiddle.net/bridget_kilgallon/jxh2urgg/

JS:

;(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        // onStart runs as soon as link has been activated
        onStart : {

          // Set the duration of our animation
          duration: 250,

          // Alterations to the page
          render: function () {

            // Quickly toggles a class and restarts css animations
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState'); // makes public methods available
})(jQuery);

;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#main').smoothState({
        onStart : {
          duration: 250,
          render: function () {
            content.toggleAnimationClass('is-exiting');

            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);

SCSS:

/** Reverse "exit" animations */
.m-scene.is-exiting {
    .scene-element {
      animation-direction: alternate-reverse;
      -webkit-animation-direction: alternate-reverse;
      -moz-animation-direction: alternate-reverse;
    }
}

Answer 1

toggleAnimationClass() has been deprecated. Use restartCSSAnimations() instead, and add or remove the animation classes on the appropiate callbacks.

For example:

var smoothState = $page.smoothState({
    onStart: {
      duration: 250,
      render: function (url, $container) {
        // Add your CSS animation reversing class
        $page.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();

        // anything else
      }
    },
    onEnd: {
      duration: 0,
      render: function (url, $container, $content) {
        // Remove your CSS animation reversing class
        $page.removeClass('is-exiting');

        // Inject the new content
        $container.html($content);
      }
    }
  }).data('smoothState');

Answer 2

Ran into the same issue. It's important to read the code of the restartCSSAnimations function.

It only restarts animations tied to the main container object. In my case I had animations on children which did not fire.

My solution was to add a 'pt-reverse' class to any element that need a reverse animation. In the onStart I then added the following instead of restartCSSAnimations:

els = $('.pt-reverse');
$.each(els,function(ix,el) {
    var animation = $(el).css('animation-name');
    $(el).css('animation-name','none');
    $(el).height();
    $(el).css('animation-name',animation);
});

// smoothState.restartCSSAnimations();

This does essentially what restartCSSAnimations does, except more targeted to specific elements.

Now it's working smoothly.

Answer 3

Check the duration of your animation and ensure that it's lasting the same amount of time as you've set for your duration key/value pair in JavaScript.