9 Things You should know before using Barba.js(Pjax)

Barba.js make it easy that you develop comfortable Pjax transition to your website easily. But there are some points you have to be aware of when you use Barba.js.  In this article we will introduce 9 points and their solutions you have to take in your account.
See this article when you are interested in website development using Barba.js.
Prev: How to Add Cool Page Transition Animation using Barba.js

Update html tags in head tag.

Tags In <Head> Tag are not automatically updated between your website pages when using Barba.js. So You have to add javascript code to replace them. The sample code below is the useful snippet to do it. please modify headTags array suitable for your website.

Fetch JS only included in specific pages.

Nowadays page speed is one of the important factors to evaluate website and sometimes developers like to include a script, which is not used in the entire website but in some pages, in specific pages. In this case, you can also add a selector of your script to headTags array so that your website can fetch it when page transition done.

Use third-party JS library with Barba.js

Normally, there is a code for initialisation such as window.addlistner('load', function(){…})) in third-party JS library. Since Barba.js doesn’t reload page but first page view, these init functions are not called on every page transition. So please take it in your account when you choose third-party JS library.

Send pageview to Google Analytics

When using Google Analytics or Tag Manager, you have to send pageview on every page transition.

 

Update Contents out of .barba-container

When you design your websites using barba.js, basically only the area wrapped by .barba-container should be updated page by page. But usually it’s happened that there are some elements you want to update out of your container in the middle of development of your website. For instance, we integrated Barba.js into WordPress and WordPress normally update body classes on each page and the developer use its classes to change style on each page. In this case, please add JS sample code below to replace HTML out of container. You can also apply this technique to everywhere in your page, not only body classes. newPageRawHTML Contains a whole HTML of fetched new page.

Deactivate Barba.js on mobile (if necessary)

Generally speaking, mobile device has lower spec rather than desktop PC. So if you use rich animation between pages, it might not animate like you imagine on smartphone. At this time, you may have to consider turning off Barba.js.

Prevent check of links ending with extension.

You can customize the rule of pjax transition activation by adding the code below.

Now let’s add custom check to make pjax transition disabled when links ending with extensions clicked.

By adding .no-barba class to the element, you can also deactivate pjax transition.(refer: Barba.js

Activate pjax transition when anchor links clicked.

As default, preventCheck makes Pjax transition disable when anchor links(url with #) clicked. But wait, it’s no problem that Barba.js is activated when visitors click links forwarding to another page in the same domain. Let’s change to make it do so.

In addition, let’s add scroll animation to anchor position when page transition end.

Make smooth pjax animation

No need to say rich-animated and smooth page transition is one of the biggest benefits by Barba.js. But in some cases, we see animation, especially rich animation, is flickering or jumpy. In case like this, please try quick solutions below.

Make hardware acceleration activated

Make 3D CSS properties disabled

The code above will be applied to webkit browser only.

Add will-change property

Will-change is not major property but sometimes it’s useful in css animation problems. According to MDN web docs, it’s the final option and should not be used for existing problems. Please consider before you use it.

Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

Extra *Not Recommended

Add code below if you like to eval script within .barba-container of new page.

Please note that eval() is not recommended to use because of lack of security.

Summary

We pointed out 9 points + 1 extra of the development with Barba.js. Base on my experience, most of obstacles by Barba.js can be solved by these techniques. But you have to be careful about Third-Party JS part. Actually, we had also changed the plan of using JS library in the middle of coding of our wordpress theme. If you have chance to use it, we recommend you to have quick test with Barba.js and other JS library before you enter coding phase.

Thank you for reading our article and please share this post if you like:)

Latest Posts