Smoothstate.js.is-exiting reverse animation not firing
I know this question has been asked in various places, but I have yet to find an answer that works for my situation.
I am using smoothstate.js to run a series of animations on page load and (hopefully) cancel the animation on page exits.
Works great on page load, but no luck backwards. Scrolling up doesn't seem to work either.
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;
}
}
toggleAnimationClass()
deprecated. Instead, use restartCSSAnimations()
and add or remove animation classes for the appropriate 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');
Go to the same problem. It is important to read the code for the restartCSSAnimations function.
It only restarts animations that are attached to the main container object. In my case, I had animations on children that didn't shoot.
My solution was to add the "pt-reverse" class to any element that needs reverse animation. In onStart, I 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 what restartCSSAnimations does, aside from being more element-specific.
Now it works smoothly.
Check the animation duration and make sure it lasts the same amount of time as you set your duration key / value pair in JavaScript.