User guide

barba.js [v2]

Getting started (legacy)

This example does not use any modern JS syntax neither modules…

Prepare your HTML

In your web page, put the Barba structure and load scripts.

<div data-barba="wrapper">
  <div data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change between your pages -->

<!-- load some animation library -->
<script src=""></script>

<!-- load barba.js (this will use the latest UMD version of the library) -->
<script src=""></script>

<!-- load your scripts -->
<script src="your-main-script-file.js"></script>

Configure Barba

In your main script file, init the library.

// init Barba with a default "opacity" transition
  transitions: [{
    name: 'legacy-example',
    leave: function(data) {
      var done = this.async();, 1, {
        opacity: 0,
        onComplete: done
    enter: function(data) {
      var done = this.async();
      TweenMax.from(, 1, {
        opacity: 0,
        onComplete: done