Barba makes your site work like a Single Page Application (SPA), allowing you to create smooth transitions without having to reload the whole site.

How it works?

Barba’s default behavior:

  • prefetch the next page
  • store it in the cache
  • add the data-barba="container" of the next page at the end of the data-barba="wrapper" element
  • remove the current data-barba="container" from the DOM when transition is done

Here is a small diagram that describe Barba’s main concept when navigating between two pages:

Lifecycle diagram

Note that using the sync property will end in a different page lifecycle, see transition sync mode.

During the transition process, Barba doesn’t apply any styles to the container: you need to manage it by yourself with an animation library, this is where the magic happen! Be sure to take a look at the recipes to discover how to properly manage containers.