Adding Page Transitions To WordPress Using Barba.js

Authored By: James LePage
Published On: July 28, 2020

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.

Full Disclosure | FTC Statement

amazon elementor E book

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.

What’s Barba.js?

Barba.js
Barba Animation Example 1
Barba.js
Barba Animation Example 2

Barba.js is a JavaScript library that allows you to create fluid and smooth transitions between your websites pages. These transitions can be as simple as fading to the next page, and can be as complex as elements morphing into new ones as the user navigates through the side. Whatever you use cases, this is a very cool library that adds a professional field to any WordPress website.

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.

Why Barba.js And 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.

Adding page transitions to a WordPress website using Barba.js

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).

How to Add Cool Page Transition Animation by Pjax(Barba.js)[Demo ...
Source

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.

Again, this is a basic tutorial on how to implement this JavaScript library into your WordPress website, if you're looking for a tutorial on how to do advanced things with Barba.js , you should look elsewhere.

Set up your Oxygen Builder template

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.

As you can see, we have our wrapper, then our code block which contains all of the JavaScript and CDN Barba.js, then we have our DIV which is the container for all of the content, and then within that DIV is usually an inner content section.

The first DIVs ID is renamed to: #barba-wrapper

The Code Block contains the CDN as well as all transition rules.

<script src="https://unpkg.com/@barba/core"></script> <!-- load gsap animation library (minified version) --> <script src="https://unpkg.com/[email protected]/dist/gsap.min.js"></script> <!-- init barba with a simple opacity transition --> <script type="text/javascript"> barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0; transition-duration: 5000ms; }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0; transition-duration: 5000ms; }); } }] }); </script>

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.

Conclusion

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!

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Maxence
Maxence
2 months ago

I tried your solution but i've got problem with your parameters in gsap.to (about the duration and ; ) after change your gsap parameters -> gsap.to(data.current.container, {opacity: 0,duration: .5}); I've got the error "No Barba wrapper found". Do you know a solution to this problem ?

Last edited 2 months ago by Maxence
Maxence
Maxence
2 months ago
Reply to  James LePage

Your solution with the class barba-container and id barba-wrapper is part of the V.1 of barba, with the V.2 we are forced to use customs attributes to add data-barba in the divs (https://barba.js.org/docs/getstarted/markup/)

Screen Shot 2020-07-31 at 18.27.33.png
Maxence
Maxence
2 months ago
Reply to  James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram