Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.
We only recommend items/tools that we've personally used and like.
In this quick tutorial we are going to discuss how to add page transitions to WordPress using Barba.js , Oxygen Builder, and a little bit of manual work.
It also boosts your performance by reducing the delay between pages, minimizing HTTP requests, and increasing user experience. It's an incredibly lightweight library (only 9kbs) that's fairly simple to integrate into WordPress using Oxygen Builder.
Before continuing, you should understand that we are going to be adding page transitions to our WordPress website built with Oxygen Builder. Oxygen Builder changes the overall structure of a WordPress website.
Typically, you use a premade theme which consists of dozens of PHP file templates. When using Oxygen Builder, you remove the WordPress theme from the equation, and build the website from the ground up. This is really helpful from both a design and development standpoint if you're looking for a completely custom way to build a website using a visual builder.
Of all builders, Oxygen Builder is the best for developers because of this. When it comes to incorporating Barba.js into a WordPress website, Oxygen Builder simplifies the process immensely. You can still incorporate Barba.js into a traditional WordPress website made with a theme, but this is much more difficult and requires you to go into the actual PHP files that make up the website and add your own code.
If you're comfortable with that, continue down this tutorial, and you'll be able to understand the basic implementation Of Barba.js into a WordPress website.
If you're not, and you're not using Oxygen Builder to create the WordPress website, you may want to sit this one out. Or, you could go take a look at Oxygen Builder and try it out for yourself (lifetime license, money back guarantee, and no affiliate program).
Now, let's take a look at how to incorporate Barba.js into a WordPress website created with Oxygen Builder . It's actually quite simple, and given the complexity of the library this is surprising.
When creating a WordPress website with Oxygen Builder, you typically have a catchall template that applies the header and footer to the site. in that catchall template, between the header in the footer, is an inner content component. This Inter content component calls the actual page when loading the template. Each page can have its own template (as can categories, archives, and anything else you can think of).
But the beauty about Oxygen Builder is that you have complete control over all of your page templates without needing to even understand how PHP works. And that simplicity is what we are going to use to add Barba.js, create high quality transitions between our WordPress pages, and impress all of our clients and website visitors.
to add the library to WordPress, we are going to use a header and footer catchall template. This is because we need to wrap the inner content of the website in two Divs. this is actually quite easy.
We are also going to use a code block component that is native to Oxygen Builder too add the Barba.js library from a CDN, and initialize it.
When adding the Barba.js library to any website, you need to add two Divs. the first one is a wrapper that surrounds all of the content. The second is a container that the content in which you want to be animated during page transitions is contained in.
<div id="barba-wrapper"> <div class="barba-container"> ... content to be changed </div> </div>
Here's a quick diagram of exactly how it is implemented into a Oxygen Builder website.
The first DIVs ID is renamed to: #barba-wrapper
The Code Block contains the CDN as well as all transition rules.
The second DIV gets a new class: .barba-container
All page content “inner content block” is added within that DIV.
And that's about it. As you can see it's really easy to add Barba.js to WordPress using Oxygen Builder. You can follow these same general structure when editing theme files if you have a WordPress website not using Oxygen Builder. From that, you can build out advanced rules, transitions, and more.
The transition contained within this code on our post is very simple, and makes the page fade to the body background color.
More complex Barba.js transitions can include SVG screens, more of individual sections, and more.
This quick tutorial should have shown you the overall steps that you can take to add Barba.js to WordPress using Oxygen Builder. Because you can control every aspect of your website in the visual builder, it makes it really easy to rap in your content in those tags. If you don't have Oxygen Builder and would like to add Barba.js to WordPress, this becomes a little more complicated but you can follow the general principles outlined in this article, and apply the wrappers to your theme.
If you have any questions, feel free to reach out in the comments. Also share this using the buttons on the right if you enjoyed!
Expertly curated emails that will help you generate more income through good design.