Effortless Transitions with BarbaJS
3 min read
In the evolving landscape of modern web development, tools like Barba JS, SWUP and Turbo Hotwire are aiding developers in creating seamless page transitions and reducing the need for traditional JavaScript frameworks like Vue or React to achieve these experiences.
These tools are especially beneficial when working with content management systems like Craft CMS, reducing the need for complex headless setups while offering seamless page transitions that enhance the user experience.
Why these tools are gaining popularity
It used to be the case that if you wanted seamless page transitions on your website, you had to use tools like Vue or React. This comes with added complications when integrating a CMS into the mix which entails creating a headless setup. Which can work quite well but in my experience requires significant oversight, a deep understanding of the architecture and unnecessary added complexity.
These transition libraries represent a return to simplicity. Developers get to use the tech stack they're comfortable with but for added flourish these libraries slot right in. This for me is a win win, more maintainable code and an overall better developer experience.
Wappalyzer.com shows an increase in usage over the past few years:
Recently when using Barba JS on a Craft CMS project, I was surprised just how straightforward the tool was to set up. The same kind of development approach we’ve been using for years, but with some added JavaScript magic on top. Furthermore Barba JS is very lightweight at only 9kb when minified and although frameworks like Vue are getting more and more lightweight, this is still considerably smaller.
JavaScript re-initialisation
One of the key learnings I’ve had while working with Barba.js is understanding how to properly re-initialise JavaScript after a page transition. Each time the user moves to a new page, it’s essential to ensure that any JavaScript logic is correctly reset and applied to the new page’s content. Leveraging Barba’s hooks I was able to emit custom events on the window i.e. page-change and before-page-change. Allowing me to simply listen for these events just like I would with a window load event within my JS components.
Using the beforeLeave and after BarbaJS hooks like so:
beforeLeave(data) {
const beforeLeaveEvent = new CustomEvent('before-page-change')
window.dispatchEvent(beforeLeaveEvent)
},
after(data) {
const enterEvent = new CustomEvent('page-change')
window.dispatchEvent(enterEvent)
}
Then take for example a component for handling accordions, I simply listen for the new custom event along with a load event:
window.addEventListener('page-change', function() {
accordions.init()
})
window.addEventListener('load', function () {
accordions.init()
})
Animating the page transition
When it comes to actually animating the page transition, BarbaJS does not handle this so you have to implement your own approach. I'm quite familiar with GSAP so that was my tool of choice. The advantage to GSAP in this scenario is being able to easily play / restart the animation.
I have a GSAP Timeline that is paused by default (waiting for page change), and onComplete restarts and pauses. The animation duration should be around 0.5s to 1s, to allow the content underneath to refresh without the user noticing.
const tlPageTransition = gsap.timeline({
paused: true,
onComplete: function(timeline) {
tlPageTransition.restart()
tlPageTransition.pause()
}
})
I then play this animation using the beforeLeave hook mentioned above.
beforeLeave(data) {
tlPageTransition.play()
}
Resources
How SEO has made me a better UX designer
5 min read
How Tailwind has changed our development process
4 min read
Why craft CMS is the best choice for custom websites in 2024
5.5 min read
