barbajs tutorial
HTML Javascript

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>
Written By

18 comments

    1. The javascript (and everything else) outside barba-wrapper/container remains unchanged. So if there is a specific piece of javascript for a page, you will need to include it in barba-container of that page. It’s best that you test the all the plugin init after implemented barba.js

  1. Hello, thanks for this tutorial. I hope you can help me with a big problem i cant solve by myself. I am using BarbaJS for a simple fade in and out transition. This works pretty good and easy. But on a specific page I want that my oldContainer is not fading out and that my newContainer of another page should be loaded in an overlay over my oldContainer. I was trying to have the content of this page outside of my barbaWrapper, but this causes problems for other sublinks/pages. I really hope you can help me here.. Thank you!!

  2. I used this tutorial to get Barba.js working with transistions.

    However, on IE 11 I get errors, for instance on
    this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));

    Can I get this working on IE11?
    Or only load Barba.js if the browser is not IE11/supports the JS?

  3. I am getting nothing but errors following your tutorials, is there any chance this is outdated? I am using newest version of chrome, most recent version of barba and jquery. Literally copy and pasted your code and doesn’t work for me.??

  4. Just found out it is because push state doesnt work on local files for security reasons, so you need to run a local server in order for barba to work its magic… Maybe should mention that in the tutorial

    1. Yes, I had the same issue of because I was working with local files without using a local server. Thank you for hint.

  5. Great ! Thanks.
    Where is the link of complete source code with page1.html, page2.html, cupcake.png, styles.css, etc ?

  6. using it on wordpress, i’ve noticed once you go to a new page the old page id is still present and when you click the wordpress edit button it edits the old page, anyone found a way around this?

  7. Hi there red stapler I am new to us and trying to get my head around this problem. I have a custom page transition which I done but I am using gsap to animate the page. Home page animates great but as soon as you go to the next page the is stops working as there is no refresh. How do you use views and where to put that in the code would be a great help please. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *