Adding Page Transitions To WordPress Using Barba.js

Published: 6 months ago

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/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>

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 Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Maxence
Maxence
5 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 5 months ago by Maxence
Maxence
Maxence
5 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
5 months ago
Reply to  James LePage
suito
suito
1 month ago
Reply to  James LePage

please update your tutorial. would be very helpful!

Mart
Mart
2 months ago

Hi there, great tutorial!

For some reason it's not working correctly for me, though. The page fades out nicely, and loads in the HTML content for the new page, but it doesn't load the styling that I assigned to the content.
For example, i don't see the background image of a div in the new page.

When i load the page manually it works fine.

Would you have any idea how to fix this?

suito
suito
1 month ago

Sadly this does not work at all. I did this step by step but there is no transition between the pages. 🙁

Jono
Jono
20 days ago

One problem is this doesn't load the scripts that come with the corresponding pages, so some pages that uses certain oxygen components won't work without a refresh. Eg, the oxygen "unslider". If coming FROM a page WITHOUT the slider, the script for the slider won't be loaded, and the slider won't work!

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

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.
WS Form PRO

Author

  • James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram