AJAX Page Transitions for Beaver Builder and Wordpress using Barba.js

Published in

All Kinds Of Stories

7 min readJul 24, 2019

There’s a lot going on in that title, so let’s break it down one at a time. AJAX page transitions make your page transitions feel seamless by only loading the content that changes between pages. Beaver Builder is a popular page building software built for WordPress that allows even clients to edit and build out beautiful landing pages with ease. How do we combine a powerful page builder and AJAX page transitions? The Barba.js library. This library uses PJAX (Pushstate AJAX) to create a better user experience for visitors on your website.

If you’re just here looking for a solution as to why your Beaver Builder layout isn’t working with Barba.js, you can skip to the solution here. For everyone else, strap in, because this is going to blow your mind.

Why Barba.js?

Barba.js is one of the best Javascript libraries for creating fluid and smooth transitions between your website’s pages. It reduces the delay when transitioning between pages on your website. This reduction in delay allows users to reach content quicker, makes page transitions visually appealing, and with a little creativity, it can set you apart from your competitors. Barba.js has tons of options for every page state, allowing you to customize animations on a page by page basis, and it’s easy to implement with very little Javascript, HTML, or CSS knowledge. Barba.js can definitely be daunting at first, but with a little time and research, you can take your website to another level.

Before we go any further, take a look at some of the examples below to see what Barba.js can do:

Great, it looks cool, now how do I implement it?

Keep in mind, I was exactly where you are now not too long ago. I had never used Barba.js. I had no idea where to start, and the documentation was a little confusing. So let’s start with the basics.

You’re going to need to include the Barba.js library in your website, To do this, here are a few options:

If you’re using node.js, you can just install it in your node modules folder via:

npm install @barba/core

You can include it in your header/footer via CDN( unpkg, cdnjs) using:

<script src="https://unpkg.com/@barba/core"></script>

Or download the library directly from Github here and include them in your header/footer.

<script src="../path/to/barba.js"></script>

Now that you have Barba.js included on your page, let’s look at setting up your html structure to work with it

Barba.js identifies how your page is structured using two main data attributes, these are:

<body data-barba="wrapper">

The data-barba="wrapper" attribute typically goes on the body element of your html page, but you can move it around to suit your needs, throw it on a div, a section, or article element. Inside of this, we're going to put another element with our second data attribute.

<main data-barba="container">

The data-barba="container" attribute goes on the container that holds all of your content. Anything inside of the element with data-barba="container" will change depending on the content of the page. These two attributes will need to exist on every page, whether you're using a transition or not for that page. This is how Barba.js knows what to keep, what to change, and where to go. A very simplified example looks like this:

<body data-barba="wrapper">
   <main data-barba="container">
     <!-- put the content you wish to change between your pages -->
   </main>
</body>

Okay, I have my HTML structure set up, but my pages still aren’t doing anything cool?

Well that’s because we haven’t actually added any javascript yet. In this example, I’m using anime.js a small animation library with a ton of power, you should check them out. You can install anime.js the same way you did Barba.js, via npm, cdn, or download and import. The example code below creates a page transition that fades out the current content, then fades in the incoming content using opacity.

import barba from '@barba/core';
import anime from 'animejs';jQuery( document ).ready(function($) {barba.init({
  transitions: [{
    sync: true, // sync the transitions up so they occur concurrently
    appear({ // when you first load the website.
      current,
    }) {
      const targets = current.container; // target the current page container.
      const a = anime({ // new animations via anime js
        targets, // our current container
        opacity: [0, 1], // change opacity from 0 to 1.
        duration: 1500, // time in ms
        easing: 'linear', // easing function
      });return a.finished;
    },
    leave({ // leaving the current page
      current,
    }) {
      const targets = current.container; // target current page
      const a = anime({ // new animation
        targets, // current page
        opacity: [1, 0], // fade out from 1 to 0 opacity
        duration: 1500, //time in ms
        easing: 'linear', // easing function
      });return a.finished;
    },
    enter({ // entering the next page
      next,
    }) {
      const targets = next.container; // target the container of the next page
      const a = anime({ // new animation
        targets, // next page
        opacity: [0, 1], // fade in from 0 to 1 opacity
        duration: 1500, // time in ms
        easing: 'linear', // easing function
      });return a.finished;
    },
  }],
});
});

I know this looks like a lot of code, but really we’re only doing 3 things here:

When we land on the website for the first time, fade the content in the data-barba="container" element in.
When we leave the current page, fade the content in the current data-barba="container" element out.
When we enter the new page, which occurs immediately after we leave the current page, fade the content in the data-barba="container" element in.

Keep in mind, the only elements on the page that change are located inside the data-barba="container" element. You don't want to put your header, footer, etc inside of there, but these global elements do still need to be contained within the data-barba="wrapper" element.

Didn’t you mention a page builder earlier?

I did! The page builder I mentioned is called Beaver Builder. While using Beaver Builder with Barba.js, I ran into an error and couldn’t find an article or solution online.

So what’s the error?

Beaver Builder, and a few other page builders load CSS for each page or layout on a case by case basis. These builders also load CSS for each particular module on a page using specific ID’s that are auto generated. When the page builder outputs the CSS file for the page, it only outputs what is necessary for that specific page. This becomes a problem when using PJAX and Barba.js because they only refresh what is inside the container. In turn, the CSS that’s supposed to be generated for that new page you just loaded never gets generated.

So how do we fix this?

Beaver Builder includes two filters that we can combine to fix this issue.

The first one, fl_builder_render_assets_inline, allows you to render the CSS styles inline instead of loading a stylesheet.

add_filter( 'fl_builder_render_assets_inline', '__return_true' );

The second one, fl_builder_global_posts, is a little more complicated. This filter allows you to globally load CSS for an array of page IDs.

function my_global_builder_posts( $post_ids ) { 
    $post_ids = get_all_page_ids(); return $post_ids; 
} 
add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );

In the code above, we’re defining a function that gets all of the page IDs by using get_all_page_ids() and returns that array of IDs. This array of ID's is added to the filter and forces the layout CSS for all of the layouts to be loaded regardless of what page is currently being viewed.

Isn’t that just bloating the file and slowing down page speed?

Usually, yes. However in this day and age we have access to page optimization plugins. Most plugins will grab all of the CSS or JavaScript on a page, minify it, and then generate a single file that holds all of your CSS and JavaScript. My personal preference for optimization and minification is a WordPress plugin called Autoptimize.

So there you have it. Now that we have all of our CSS loaded, our page transitions look great and our layouts look great too. You’ve just learned how to make your website 10x cooler because who doesn’t love a good page transition. Go out and impress friends and clients with your newfound knowledge.

Originally published at https://akosweb.com on July 24, 2019.