I've been searching for a solution to my issue but haven't had any luck finding one that works for me.
Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while the animations work on page load, I have not been able to get them to reverse properly. Additionally, the scroll to top function does not seem to be functioning either.
If you could take a look at 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;
}
}