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
Objective
The objective is the implementation of Pjax transition like GIF animation below.
Sample Code and 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
- Get new page content by Ajax when a link clicked.
- 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.
- 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. - 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
| 1 2 3 4 5 | <div id="barba-wrapper"> <div class="barba-container"> ...Put here the content you wish to change between pages... </div> </div> |
DOM in the middle of page transition
| 1 2 3 4 5 6 7 8 9 10 | <div id="barba-wrapper"> <!-- Old Container --> <div class="barba-container"> ...Put here the content you wish to change between pages... </div> <!-- New Container --> <div class="barba-container"> ...Put here the content you wish to change between pages... </div> </div> |
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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pjax Demo 1</title> </head> <body> <div class="header">Header</div> <div class="container"> <div id="barba-wrapper" class="main"> <div class="barba-container"> <div class="page1"> <p>Main</p> <p><a href="./page2.html">Go to page 2</a></p> </div> </div> </div> <div class="sidebar">Sidebar</div> </div> <div class="footer">Footer</div> <script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="./pjax.js"></script> <link rel="stylesheet" href="./pjax.css"/> </body> </html> |
Javascript Coding
Here is js code.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | (function (Barba, $) { document.addEventListener("DOMContentLoaded", function (event) { console.log('pjax start'); // Barba init Barba.Pjax.start(); // Barba prefetch init 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).css({ position: 'absolute', top: '0', left: '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); $el.css({ visibility: 'visible', opacity: 0 }).addClass('fadein'); $el.animate({opacity: 1}, 600, 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; }; }); }(Barba, jQuery)); |
Look into Js code details
Barba.js Initialization
First of all, initialize barba.js.
| 1 2 3 4 | // Barba init Barba.Pjax.start(); // Barba prefetch init Barba.Prefetch.init(); |
Define Animation
| 1 | var FadeTransition = Barba.BaseTransition.extend({…}); |
Extend BaseTransition to define custom transition function.
| 1 2 3 4 5 | start: function () { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, |
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.
| 1 2 3 4 5 6 7 | fadeOut: function () { return $(this.oldContainer).css({ position: 'absolute', top: '0', left: '0' }).promise(); }, |
Position absolute is set for new container to overlay old container.
| 1 2 3 4 5 6 7 8 9 10 11 | fadeIn: function () { var _this = this; var $el = $(this.newContainer); $el.css({ visibility: 'visible', opacity: 0 }).addClass('fadein'); $el.animate({opacity: 1}, 600, function () { _this.done(); }); } |
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.
| 1 2 3 | Barba.Pjax.getTransition = function () { return FadeTransition; }; |
Define getTransition function to activate FadeTransition.
CSS Coding
Set CSS animation for new container to slide-in from left to right.
| 1 2 3 4 5 6 | .barba-container.fadein { animation: moveFromLeftFade .6s ease; } @keyframes moveFromLeftFade { from { transform: translateX(-100%); } } |
Now, All set and you page has pjax transition animation.
Summary
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