How to Add Cool Page Transition Animation by Pjax(Barba.js)[Demo and Code attached]

In this article, we explain how to develop smooth page transition animation by Barba.js. Please see previous post if you like to know basic Barba.js integration to your website. Please refer previous post.
Prev:How to implement Barba.js and increase page transition speed


The objective is the implementation of Pjax transition like GIF animation below.

Sample Code and Demo

See Code See Demo

The Procedure of Page Transition by Barba.js

As we explained in previous post, the elements wrapped by .barba-container are updated page by page, we have to know the procedure of Barba.js page transition to handle it well.

The Sequence of Page transition by Barba.js

  1. Get new page content by Ajax when a link clicked.
  2. Append new container(the element with .barba-container class) obtained in previous step to current container. *Now, we have two containers in the same page.
  3. Add animation to old and new containers to switch page transition smoothly.
    * This step is not automatically done by Barba.js. You have to implement it.
  4. Remove old container when page transition ends.

Please take notes that there are two containers in the same page on Step 2. The codes below are examples to describe the container which is in different status . One is the status before/after page transition and the other one is in the middle of page transition.

DOM before/after page transition

DOM in the middle of page transition

As you may know from “DOM in the middle of page transition”, the combination of animating two containers are the clue to make unique page transition.
Now let’s move on to exact html coding.

HTML Coding

Here is the html code. Please make sure the elements you want to refresh on each page transition has .barba-container class and it must be wrapped by #barba-wrapper id.

Javascript Coding

Here is js code.

Look into Js code details

Barba.js Initialization

First of all, initialize barba.js.

Define Animation

Extend BaseTransition to define custom transition function.

Write codes for animation in Barba.BaseTransition.start property. Now, this.fadeOut() is fadeout animation of old container and this.fadeIn.bind(this) is fadein animation of new container. Note that this.newContainerLoading is resolved when barba.js finish to fetch new page content. Now, you can manipulate them to develop your own animation.

Position absolute is set for new container to overlay old container.

In fadeIn() function, normally visibility: 'visible' should be set before page transition starts because visibility: 'hidden' is set in default.
addClass('fadein'); is set for the slide animation from left to right.
_this.done(); must be called at the end of transition in order to remove old container.

Define getTransition function to activate FadeTransition.

CSS Coding

Set CSS animation for new container to slide-in from left to right.

Now, All set and you page has pjax transition animation.
This time we explain page transition animation by Barba.js. In the next article, we will explain the points you have to take in your account when developing website with Barba.js.
Next Post: 9 Things You Should Know Before Using Barba.js

Latest Posts