Smoothstate.js implemantation

Design help Custom code
1

Hey mates!

I’m trying to use smoothstate.js on my webflow site.
The thing is that I can’t make it work both ways.
Here is my share link and my custom code

https://preview.webflow.com/preview/iadv?preview=4d732113a091bcd5de1e6667b9e6018f
http://iadv.webflow.io/

<style>
@-webkit-keyframes fadeInLeft {
  from {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }
@keyframes fadeInLeft {
  from {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }
@-webkit-keyframes fadeInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }
@keyframes fadeInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }
@-webkit-keyframes growLeft {
  from {
    -webkit-transform: scale3d(66.66%, 0, 0);
            transform: scale3d(66.66%, 0, 0);
    -webkit-transform: translate3d(-200%, 0, 0);
            transform: translate3d(-200%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }
@keyframes growLeft {
  from {
    -webkit-transform: scale3d(66.66%, 0, 0);
            transform: scale3d(66.66%, 0, 0);
    -webkit-transform: translate3d(-200%, 0, 0);
            transform: translate3d(-200%, 0, 0); }
  to {
    -webkit-transform: none;
            transform: none; } }

    .base-cols {
  -webkit-animation-duration: 3000ms;
          animation-duration: 3000ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
	.base-col--fadeinleft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft; }
	.col--fadeinright {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight; }
	.is-exiting {
      .base-cols {
        -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse;
  }
  }
/*# sourceMappingURL=mystyles.css.map */
</style>

<script>
smoothstatejs import here
</script>
<script>
$(function(){
  'use strict';
  var options = {
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 250, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        // Remove your CSS animation reversing class
        $container.removeClass('is-exiting');

        // Inject the new content
        $container.html($newContent);

      }
    }
  },
  smoothState = $('#main').smoothState(options).data('smoothState');
});
</script>

Any help is welcome!

Thanks in advance!