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;
}
}
source to share
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');
source to share
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.
source to share