exit animation will only work if start animation is in progress - smoothstate.js

Question

I have this problem where the animation will only exit if the start animation is still in progress. Once the start animation finishes and I click another link it still adds the reverse class but only show a white page and the animation will not exit.
Here is the smoothstate call:
$(function(){
'use-strict';
var options = {
anchors: 'a',
prefetch: true,
blacklist: '.no-smoothState',
debug: true,
cacheLength: 2,
onStart: {
duration: 1000,
render: function($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 1000,
render: function($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function($container, $newContent) {
}
},
smoothState = $('#wrapper').smoothState(options).data('smoothState');
});
The HTML:
<div id="wrapper">
<div id="portfolio" class="portfolio">
<header>...</header>
<main id="content">
<section>
<h2>...</h2>
</section>
</main>
</div>
</div><!-- // wrapper -->
The CSS:
#wrapper #content {
animation-duration: 1s;
transition-timing-function: ease;
animation-fill-mode: forwards;
}
#wrapper #content {
animation-name: fadeInUp;
}
#wrapper.is-exiting #content {
animation-direction: alternate-reverse;
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

Answer 1

Got it to work. If you use classes instead of ID's when targeting the animation it will start the exit animation.