What It Is
Barba is a small (4.4kb), flexible and dependency-free library that helps create fluid and smooth transitions between website pages. It helps reduce the delay in navigating between pages, minimizes content requests and enhances the overall user experience.
How It Works
It allows developers to control how content leaves and enters the browser window and, with some clever animation, elevates the brand and brings it to life online.
Increase speed in page navigation
Since the browser only needs to grab static resources once, when a user clicks to another page, the browser doesn’t have to load everything all over again. This can shave seconds (a.k.a. years, in web terms) off of page load times.
Control how content enters and leaves the screen
As designers and developers, we love fun websites that feel good. They make us want to stick around longer. There are plenty of great examples of Barba powered websites here.
A lot of developers who start using Barba are accustomed to a plug and play experience, but with Barba, planning needs to happen to make best use of its features. This might not sound like a benefit, but it is! It allows developers to write better, more optimized code, that only runs when the website needs it to run. Developers can also create routes for the user and integrate different transitions to different areas of the site.
How We Applied It to TNO
The TNO website takes advantage of Barba as well as an animation library known as Anime. We created an SVG curtain drop transition between pages to keep it simple and tie it back to what they do.
Does Barba Work With WordPress?
Yes! TNO is a WordPress-powered website. Since WordPress already handles a lot of the routing and permalinks, Barba can be implemented quite easily, especially if it’s implemented in the early stages of a project.
Overall, the benefits of Barba are impressive. The ways it can be integrated allow designers to design websites that feel more like applications, modernizing the way a user browses a site. With version 2 of the plugin in beta right now, we’re expecting it to become an even more common modern web development practice. Heck, even Marie Kondo’s new site uses it!