Using Barba.js with Sage 9

sage
1

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
2

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

3

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!

4

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.

7

Fantastic article it’s one of the very few that speak clearly about WordPress + barba.js.

@PJOY There is an important code typo though, in the final main.js file:

// main.js

// import external dependencies
import 'jquery';
    
// Import everything from autoload
import './autoload/**/*'
    
// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';
import somePage from './routes/somePage';
    
/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
  // The new page we created
  somePage,
});
    
// Init barba && Load Events
jQuery(document).ready(() => {
  routes.loadEvents();
  myBarba.init();
});

the code is missing the barba import, so code must be:

// main.js

// import external dependencies
import 'jquery';
    
// Import everything from autoload
import './autoload/**/*'
    
// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';
import somePage from './routes/somePage';
import barba from './util/barba';
    
/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
  // The new page we created
  somePage,
});
    
// Init barba && Load Events
jQuery(document).ready(() => {
  routes.loadEvents();
  barba.init();
});

and for barba.js, it is missing gsap import:

// barba.js

import gsap from 'gsap';

Kind regards,
Michael

8

@neundex @mic Thanks guys for the corrections :slight_smile:

Unfortunately I don’t have write access to the article so I can’t fix this myself. But maybe @ben could do something ? :slight_smile:

1 Like
9

Hopefully yes, as those are some important changes needed! :slight_smile:

10

Hi everyone. Is this article still correct if you wanted to use Sage 10?

11

Hello everyone !

Anyone have an example with a repo where the tutorial works?

I encounter some problems when changing the page:

The next page starts loading but goes back and loads the old page…

I don’t understand where the problem can come from, any idea ?

Thanks !