Transition

A transition is a Javascript object that will make sure to hide the old container and display the new one.

All the transitions need to extend the Barba.BaseTransiton object.

Please note: the transition starts even before the new page is loaded. This way you can start your own transition even before the next page is loaded.

Extending this object your transition will inherit the following members:

Member Description
start function that will be called automatically when your transition starts. (you can consider it the constructor of your transition)
done function that needs to be called when your transition is finished.
Do not forget to call this function!
oldContainer HTMLElement of the old container.
newContainerLoading Promise that will indicate the loading of the next container.
newContainer HTMLElement of the new container. (with visibility: hidden;)
Please note, it's undefined until newContainerLoading is resolved!

HideShow Example

By default barba.js uses a simple HideShow transition. In order to understand how it works, let's recreate it:

var HideShowTransition = Barba.BaseTransition.extend({
                    start: function() {
                    this.newContainerLoading.then(this.finish.bind(this));
                    },
                    finish: function() {
                    document.body.scrollTop = 0;
                    this.done();
                    }
});

As you noticed we used a Promise; barba.js also comes with an handy Promise polyfill.

Next, we have to tell barba.js to use our new transition:

Barba.Pjax.getTransition = function() {
                    return HideShowTransition;
};

FadeTransition Example

Let's create now a more complex transition, a FadeTransition using jQuery's .animate()

Of course you can use any JS library, plain Javascript method, CSS transitions, or something else instead.

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;
};