Turn your website into SPA with barba js

Today I’m gonna show how you can create smooth transition between website pages.

This is the result:

This time I’ll be using barba/css plugin, which let’s create transitions without javascript animation library.

Also you can find starting and finished files on my github

Let’s start by importing barba, css plugin and app.js file.

 <script src="https://unpkg.com/@barba/core"></script>
 <script src="https://unpkg.com/@barba/css"></script>
 <script src="app.js"></script>
~~~

Add required barba markup: data-barba=“wrapper” and data-barba=“container”.
~~~html
 <body data-barba="wrapper">
    <main data-barba="container" class="bg-blue">
      <div class="transition"></div>
      <div class="container">
        <h2>This is the first page</h2>
        <a href="second.html" class="btn">Next Page</a>
      </div>
    </main>

    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://unpkg.com/@barba/css"></script>
    <script src="app.js"></script>
  </body>
~~~

Everything inside the wrapper that is not inside the container won’t change and everything within container will. Also container must be inside wrapper.

### How it works:
When we click on the link barba makes a request to get the container from the next page and injects it into the current page, changes the url.

### Add javascript.

~~~javascript
// Tells barba to use css plugin
barba.use(barbaCss);
// Initializing barba
barba.init({
  transitions: [
    {
      name: 'home',
      // Code inside won't run with css plugin, use beforeOnce or afterOnce
      once() {},
    },
    {
      // specifies classname to be applied
      name: 'cover',
      // Code inside won't run with css plugin, use beforeLeave, afterLeave or the same with enter
      leave() {},
      enter() {},
    },
  ],
});
~~~
Transition is an array of objects in which we specify the transitions.
Name property specifies class name that are applied to container on transition.

Methods in barba are called hooks. Once hook specifies the transition which runs once on initial page load. Leave and enter hooks specify that we want to have leave and enter transitions. 

Now let’s add css

~~~css
/* Adds transition to the container */
.home-once-active {
  transition: opacity 300ms linear;
}

/* Starting state */
.home-once {
  opacity: 0;
}

/* Ending state */
.home-once-to {
  opacity: 1;
}

/* Overlay transition */

/* Barba listens to transitions on the container, that’s why we need to add transition to container as well */
.cover-leave-active,
.cover-enter-active,
.cover-leave-active .transition,
.cover-enter-active .transition {
  transition: transform 0.5s ease-in-out;
}

/* Cover in */
.cover-leave .transition {
  transform: translateY(-100%);
}
.cover-leave-to .transition {
  transform: translateY(0);
}

/* Cover down */
.cover-enter .transition {
  transform: translateY(0);
}
.cover-enter-to .transition {
  transform: translateY(100%);
}
~~~
That’s it for today, hope it helps. Also if you have any questions feel free to ask, I’ll try to help;). 

In the next post I’m gonna add animejs library.

Blog

Turn your website into SPA with barba js

Dima Prohorenko

Today I’m gonna show how you can create smooth transition between website pages.

Join Our Newsletter. No Spam, Only the good stuff.

Related