Barba.js + restarting X1 transitions

Design help Custom code
1

Hey all,

There are a couple other questions similar to this out there but I have tried workarounds using comments in all of those previous queries and I still cannot get satisfaction. Hoping there are some fresh ideas out and about.

I am implementing Barba.js on my website with simple fadein-out transition. The basic mechanism works - the new page replaces the old one where the barba-container tells it to.

However, the new container does not fade in - it just appears, as if the fade-in never fired. On top of that, I called a webflow destroy/ready to reload the X1 transitions I have in place on the new container, based on the “LOAD” trigger. My hope was that the new container would fade in as the X1 transitions would fire on the newly loaded page/container. But no joy. The animations on the “LOAD” trigger never fire.

Code below! Any thoughts?

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" type="text/javascript"></script>
 
 <script>
    $('document').ready(function(){
    Barba.Pjax.start(); 
    Barba.Prefetch.init();
      
    var FadeTransition = Barba.BaseTransition.extend({
      start: function() {
    /**
     * This function is automatically called as soon the Transition starts
     * this.newContainerLoading is a Promise for the loading of the new container
     * (Barba.js also comes with an handy Promise polyfill!)
     */

    // As soon the loading is finished and the old page is faded out, let's fade the new page
    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
      },

      fadeOut: function() {
    /**
     * this.oldContainer is the HTMLElement of the old Container
     */

    return $(this.oldContainer).animate({ opacity: 0 }).promise();
      },

      fadeIn: function() {
    /**
     * this.newContainer is the HTMLElement of the new Container
     * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
     * Please note, newContainer is available just after newContainerLoading is resolved!
     */

    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      /**
       * Do not forget to call .done() as soon your transition is finished!
       * .done() will automatically remove from the DOM the old Container
       */

      _this.done();
    });
      }
    });

    /**
     * Next step, you have to tell Barba to use the new Transition
     */

    Barba.Pjax.getTransition = function() {
      /**
       * Here you can use your own logic!
       * For example you can use different Transition based on the current page or link...
       */

      return FadeTransition;
    }; 
    });
    </script>
     <script>
    $( 'document' ).ajaxComplete( function() {
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require( 'ix2' ).init();
    document.dispatchEvent( new Event( 'readystatechange' ) );
    }
      </script>