Roots Discourse

Using Barba.js with Sage 9

Originally published at: https://roots.io/guides/using-barba-js-with-sage-9/

Barba.js uses pushState and other AJAX techniques to load pages asynchronously while maintaining a sensible and useful browser history. By combining it with a JavaScript animation library, we can create a memorable browsing experience. (source) This guide attempts to describe an efficient and useful way to integrate Barba with the Sage starter theme. Note: This…

9 Likes

this looks great! - thanks for the info, will definitely give it try soon :slight_smile:

nice, thanks a lot for this guide. this is exactly what I was going to figure out next for integration in my default theme. awesome!

Hello @PJOY and thanks for the great article. Many useful stuff in there :ok_hand:

Some notes:

I think you have a typo in the Last Try snippet: On the enter method, i believe you should animate .from the data.next.container, not the data.current.container. Right?

Also with this approach, all custom code is added inside each Transition object, which as per Barba.js docs, is not recommended. Could this work better if we dropped the whole routing logic of Sage and used Barba.js Views instead? We could have a Base view, that would act like common.js and each page could have its own View, extending the Base one. That way we’d know that each Transition object, contains only the logic for the actual transition and all pages’ specific code, would be hooked into the relevant View.