Barba.js Tutorial for Beginners
You’ve got a great idea for a new website project, and you’ve decided that you are going to publish it on Awwwards.com. Your project is almost done, and you noticed that something is missing. Every page has that boring, browser default loading, but you want a smooth and fulid transitions between your website’s pages. What do you need? You need Barba.js.
What is Barba.js?
Barba.js is a small and easy-to-use library that helps you create fluid and smooth transitions between your website’s pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user’s web experience.
You will need some basic knowledge of HTML, CSS, and JavaScript. So let’s get right into it.
Markup
Barba needs to know a little bit about your site architecture. By default, it uses this markup in your pages:
<body data-barba="wrapper">
<!-- put here content that will not change between your pages, like <header> or <nav> -->
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change between your pages, like your main content <h1> or <p> -->
</main>
<!-- put here content that will not change between your pages, like <footer> -->
</body>
Wrapper
The wrapper is the main Barba section that contains all your page structure and the Barba container. Beware, everything inside of this wrapper and outside of the container will not be updated by Barba: you can put your <header>, <footer> or <nav> safely here. It is mainly defined on the <body> tag, but you can add it on a div or section for example.
Container
The container defines a section in which content is updated automatically when you navigate between your pages. Beware, everything inside of this container will be updated by Barba: you can put your <footer> safely here. It is mainly defined on the <main> tag, but you can add it on a div or section for example.
Namespace
The namespace allows you to define a unique name for each page. Barba mainly uses this namespace for Transition rules and Views.
You can easily override every data-barba attribute, but for this simple tutorial we won’t do that.
Basic Transition
One of the most important thing that you will use is transitions. A transition runs between two pages of your site, leading the user to see a fluid and smooth animation instead of a browser “force reload” with a blank page.
A basic transition is made of a leave animation, that is executed when leaving the current page, and an enter animation that is executed when entering the next page:
barba.init({
transitions: [{
name: 'default-transition',
leave() {
// create your stunning leave animation here
},
enter() {
// create your amazing enter animation here
}
}]
});
Animation
The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition.
There is a lot of javascript animation libraries on the web, but we will use GSAP. For the demonstration, here is a basic opacity transition with gsap that consist of making the current page transparent, while the next page become opaque:
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
Custom Code
If you need to run onload events, you can trigger them with Hooks in transitions, but if you need custom code for a specific page, the correct way is to use Views. Views are conditioned by a unique page namespace.
barba.init({
views: [{
namespace: 'home',
beforeEnter() {
// update the menu based on user navigation
menu.update();
},
afterEnter() {
// refresh the parallax based on new page content
parallax.refresh();
}
}]
});
Lifecycle
Barba makes your site work like a Single Page Application (SPA), allowing you to create smooth transitions without having to reload the whole site. Barba’s default behavior:
- prefetch the next page
- store it in the cache
- add the data-barba=”container” of the next page at the end of the data-barba=”wrapper” element
- remove the current data-barba=”container” from the DOM when transition is done
Here is a small diagram that describe Barba’s main concept when navigating between two pages:
Barba.js Lifecycle
During the transition process, Barba doesn’t apply any styles to the container, so you need to manage it by yourself with an animation library, this is where the magic happen.
If you followed this tutorial and set up everything as shown, you probably noticed that the new page is jumping when the old container fades out. That is because both the new and old containers are in the DOM structure at some point. And it is necessary that the old container is positioned absolute, so that the new container is “above” the old one, not under it. To fix that, we will change the leave hook a little bit:
leave(data) {
// ADD THIS
data.current.container.style.position = absolute;
data.current.container.style.top = 0;
data.current.container.style.left = 0;
data.current.container.style.width = '100%';
return gsap.to(data.current.container, {
opacity: 0
});
},
You can download this simple example here, or you can visit the official Barba.js documentation for more detailed and advanced examples.
