Barba.js Tutorial – How to add Transition Effect

In this tutorial, we’ll talk about Barba.js, a javascript library to help with your webpage transition and enhance the users experience using technique call PJAX or push-state AJAX. I’ll show you how to use Barba.js and how to add an animation effect during the transition using jQuery fadeIn and fadeOut.

Why Barba.js

Many of websites today are using AJAX to load the page content without having to reload the entire page resulted in faster and better experience. However, the downside is sometimes user won’t be able to use browser back button to navigate back since the content is being loaded dynamically.

Barba.js removes that weakness by utilizing the push-state API with AJAX (or many call it PJAX) This will enable you to use the AJAX to load the content and then update the browser state and url without the actual browser hard refresh.

This will help speed up the page loading time for your site since browser do not have to reload CSS and javascript files when user click a link. Also provide  an opportunity to add a nice transition effect between pages which I’m going to show you later in this tutorial.

Setup

First let’s start with downloading the latest release of Barba.js from github and import minified version of barba.js with a script tag to your webpage.

<script src="barba.min.js"></script>

You’ll need to create a barba-wrapper div. Here is where Barba.js will inject the HTML content from AJAX call when user click the link. Then create another div of .barba-container class. This will tell Barba that this element should e loaded and put into the barba-wrapper when user click a link to this page.

<div id="barba-wrapper">
  <div class="barba-container">
    //Put the content you wish to change between pages
  </div>
</div>

Put the page content into barba-wrapper and barba-container div for all your webpages. The next step is to start Barba.js when the DOM is ready by calling Barba.Pjax.start()

$('document').ready(function(){
     Barba.Pjax.start();
});

That’s it. If you click the link and open the dev console, you will see that Barba.js will prevent the default link behavior and use the push state API to change the URL in the address bar. Then Make the ajax call to load the new page content.

Adding Transition Effect

Now we’re going to add a transition effect between pages. Before we start, let’s talk about the mechanism of Barba.js transition first.

To do transition effect, you’ll need to extend the BaseTransition object. This object is responsible for hiding the old container and replace it with the new one once the new content is loaded. There few members that we should know as follow.

• start – This function will be called everytime when the transition start. This is the beginning point of the transition code.
• done – We need to call this function manually to let Barba.js know that the transition is finished.
• oldcontainer – Pretty straightforward. This is the HTML element of the old container
• newContainerLoading – A Promise that indicate the loading status of the new container (or the new page)
• NewContainer – HTML element of the new container. It’s an important note that this object is undefined until the newContainerLoading is resolved.

Now, it’s time for the coding

First we extend the BaseTranstion object and override the start function

var transEffect = Barba.BaseTransition.extend({
    start: function(){
                        
    }
});

We’ll use newContainerLoading Promise to start fadein effect and create a new function call fadeinNewcontent and pass the newcontainer into it.

start: function(){
       this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
},fadeInNewcontent: function(nc) {
                        
}

Inside the function, first we’ll hide the newContainer. We need to do this because we want to fade out the oldContainer first and wait for it to disappear before showing the new one.

Then use a jQuery fadeOut function for the oldContainer, and when the fadeOut effect has finished, we’ll start fadeIn the newContainer. Again using jQuery FadeIn. We also need to set the visibility of the new container to visible. And finally, don’t forget to call done function to signal the end of transition effect.

fadeInNewcontent: function(nc) {
  nc.hide();
 	var _this = this;
  $(this.oldContainer).fadeOut(1000).promise().done(() => {
         	nc.css('visibility','visible');
                nc.fadeIn(1000, function(){
                _this.done();
         	})
         });
}

To use the transition effect we’ve just created, assign it to getTransition like this.

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

Let’s see it in action in this video below:

You can find the Full source code of this tutorial in the link below. Hope you guys enjoy this tutorial. And please follow us on our Facebook and Youtube Channel to stay tune if you love this tutorial.

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="jquery-2.1.4.js"></script>
  <script src="barba.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="navbar"><span>Red Stapler - Barba.js</span></div>
  <div id="barba-wrapper" class="wrapper">
      <div class="barba-container">
          <img src="cupcake.png" /><br>
          <a href="/">Page 1</a> |
          <a href="page2.html">Page 2</a> |
          <a href="page3.html">Page 3</a>
      </div>    
  </div>
  <script>
          $('document').ready(function(){
            var transEffect = Barba.BaseTransition.extend({
                start: function(){
                  this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
                },
                fadeInNewcontent: function(nc) {
                  nc.hide();
                  var _this = this;
                  $(this.oldContainer).fadeOut(1000).promise().done(() => {
                    nc.css('visibility','visible');
                    nc.fadeIn(1000, function(){
                      _this.done();
                    })
                  });
                }
            });

            Barba.Pjax.getTransition = function() {
              return transEffect;
            }
            Barba.Pjax.start();
          });
  </script>
  </body>
</html>