.svg)
You’ll agree that honest no-code developer often wonders: Is there anything more I can do to improve this site's performance or user experience for a client and his users?
One effective strategy is to include famous page transitions into your website. These transitions are a staple on many awwwards websites and are widely favored by creative web developers.
What are page transitions?
If this is the first time that you’ve heard of this term, it’s basically a more natural way of transitioning from page A to page B. If they are done subtle and applied correctly, they bring a sense of liveliness to your Webflow website. Although page transitions aren't for everyone, some may argue that they are unnecessary because of some potential drawbacks that I will clarify later.
With Barba.js, there are two core steps for you to follow in order to make fluid and subtle page transitions:
- Turn your Webflow website into Single-page application (Barba.js will take care of that)
- Apply whatever animation you have in mind using the animation library (GSAP is my candidate for this one)
In this post, we will take care of the first step - integrate Barba inside our Webflow website. I assume you already know, but I should mention it anyway, that this will require custom code. On our next stop, let’s meet Barba.
What is Barba.js?
In basically one sentence, Barba.js is an enhancement library used to create fluid and smooth transitions between your website's pages. That is essentially Barba’s purpose, it helps to reduce the delay between your pages, minimize browser HTTP requests and enhance your users web experience. In other words, Barba will make our web pages load faster and more fluid.
Three Core Elements
Three core elements that will give you a brief introduction of implementing Barba are:
- Wrapper
- Container
- Namespace
By implementing them using custom attributes, your web pages get super powers and turn into a Single-page application and before I start showing you how simple it is to achieve that in Webflow, bear with me to explain what Single-page applications are.
What is Single-page application (SPA)?
I will actually borrow this one from famous MDN Web Docs, an SPA (Single-page application) is a web app implementation that loads only a single web document and then updates the body content of that single document when different content is to be shown. This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages which I will again, clarify later.
Core elements in the context of SPA
Let me actually explain this in the context of Barba.js and three core elements that I’ve mentioned earlier. Wrapper will be loaded first time as a single web document that will contain all structure of our Webflow page. This is usually <body> HTML tag in which remain Container with unique Namespace. Container will be section of the page A with content that is going to be updated when we make a request for page B. This Container is usually <main> HTML tag but because Webflow doesn’t initially come with <main> component that we can add to our website, we will use div block for that and I will refer to it as ‘main div’ for the rest of the post for sake of better understanding. Namespace is important because later in custom code, transitions will be applied based on it.
Starting point - Barba.js & Webflow
To summarize what we covered so far, our Webflow page will contain body that is going to be our Wrapper, inside body will be all sorts of content of our web page: navigation, header, footer, etc. but none of these except what’s located inside main div will be updated whenever a new request is made to the server. To clarify, if pages A and B share common components such as the header and footer, while the rest of the content differs, the unique content must be placed inside the main div. When navigating from page A to page B, only the content within the main div will be updated, leaving the shared components like the header and footer unchanged because they are not located inside main div.
It's important to note that every Webflow page needs to have a body element that acts as the Wrapper for it’s page, and a main div that functions as the Container.
Implementation process in Webflow
Just to make sure we are on the same page, our first goal is to make our website run as Single-page application using Barba. Now, to start implementing it you simply follow these three steps:
- Include Barba.js through CDN
- Set custom attributes on body and main div
- Init Barba.js in custom code of your website
For those who want to see Barba in action I’ve created showcase example of it in codesandbox.
Include Barba in Webflow
As I mentioned, custom code is requirement for using Barba.js in Webflow. So first thing in order for it to work is that we have to include it through CDN before </body> on every Webflow page (adding code snippet through the Settings > Custom code will add it to all pages) we use Barba on. Here is a CDN link for you, first step - done.
<pre><script src="https://unpkg.com/@barba/core"></script></pre>
Custom Barba attributes
Now, in Webflow, we can give every element a custom attribute, whether it’s a paragraph, a link block, or, in our case, the body and main div.
Again, our body will be our Wrapper, so on it we will add the custom property “data-barba” with the value of “wrapper". On the other hand, our main div, which will be our Container will receive two properties: one to define it as a container, so property “data-barba” with the value of “container” and the other, Namespace in order to make it unique, “data-barba-namespace” with the usual value of the page that we are currently on, so: home, contact, about, etc.
We have to repeat this process on every page that we included Barba through CDN (all pages). Again, every page must have Wrapper and Container with it’s suited Namespace. With all that step two - done.
Init Barba using custom code
The third step is the easiest, so in the custom-code section of Webflow, after the line of code where we actually included Barba.js through CDN, we will init it using barba.init({}) method with an empty object inside. This object will receive parameters as Barba.js hooks later when we combine it with GSAP library and start making page transitions. With that out the way the final step is done.
Summary
After completing all steps and your Webflow website being published to your selected domain, your website runs as Single-page application, and that was exactly our first big goal. The second one, as I mentioned in the introduction, will use the GSAP library in combination with Barba.js hooks to achieve smooth page transitions. You can read more about it here.
Introducing Barba.js lifecycle
It’s always a great thing about libraries like Barba when they have quality documentation that you can learn from. So in order to upgrade your website with page transitions, it’s mandatory to understand Barba’s lifecycle. What exactly happens behind the scenes when we request a new page?
Barba.js enhances the user experience by managing seamless page transitions through its well-defined lifecycle. To minimize load times when a link is clicked, this procedure begins by prefetching the next page as soon as the user hovers over a link. The page is cached after it has been prefetched, which reduces server requests and guarantees a faster navigation experience.
Example
During the transition from page A to page B, Barba.js manages containers by appending the data-barba="container" of the page B to the end of the data-barba="wrapper" of page A. This prepares the new content for display. Once the transition completes, Barba.js removes the data-barba="container" of page A from the DOM, maintaining a clean and efficient document structure.
We will talk more about this important topic of lifecycle in second part where we implemented Barba hooks in combination with GSAP to create smooth transitions between pages.
Advanced integration of Barba.js
Barba.js in combination with Webflow really can significantly enhance your website, but transforming it into a Single-page application is only the first step. This guide walked you through the essential steps to get started. Just so we don't make this one too overwhelming, the second part of this topic will cover the second vital step for implementing transition animations between pages. We'll accomplish it by using the GSAP animation library along with Barba.js Hooks.
Also worth mentioning is in order to follow it, I suggest first getting familiar with:
- JavaScript arrays, objects, and functions (which will be important for Barba Hooks)
- Basics of the core GSAP library (in order to combine it with Barba Hooks)
I also suggest exploring the Barba.js documentation for a deeper understanding of this powerful tool.
Conclusion
By converting your Webflow site into a Single-page application, you not only enhance load times and reduce server requests but also create a more dynamic and engaging browsing experience. While there are trade-offs, the benefits of implementing Barba.js are significant for those looking to push the boundaries of what no-code platforms can achieve.
Using tools like Barba.js and GSAP not only boosts your web development skills but also helps your projects shine in today's competitive web design world. Whether you're a no-code developer or not, mastering these technologies allows you to create amazing web experiences that impress both users and clients.
.png)
.png)
.png)
.png)