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

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>Code language: HTML, XML (xml)

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/gsap@latest/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>Code language: HTML, XML (xml)

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!