Install

Want to try Barba? Let’s install it!

Use with a bundler

Barba is published on the NPM registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the library if you are comfortable with javascript bundlers like webpack or rollup.

1
2
3
4
5
# npm
npm install @barba/core

# yarn
yarn add @barba/core

Then import it like any other module inside your build:

1
2
3
4
5
import barba from '@barba/core';

barba.init({
  // ...
});

See the list of all available options.

Using a bundler has many advantages like output compression, code splitting, tree shaking, etc., so we encourage you to use this kind of tool with Barba.

Use with a CDN

⚠️ IMPORTANT NOTE

Be aware when using a Content Delivery Network: this can lead to issues such as library downtime unavailability, website latency and bugs that could be introduced in new releases. You should bundle the library with your scripts using a specific tagged version, not only using `@barba/core` tag from the CDN as well. This is true for all the libraries you are using through a CDN, not only BarbaJS. Read more about CDNs in this great article from Google.

To rapidly include the minified production file in your webpage, load the latest build from your favorite CDN using a generic script markup:

1
2
3
4
5
<!-- unpkg -->
<script src="https://unpkg.com/@barba/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>

Then init Barba:

1
2
3
4
5
<script>
  barba.init({
    // ...
  })
</script>

See the list of all available options.

By default, if no one is specified, the CDN will automatically target the @latest version of Barba and load the UMD build from dist/barba.umd.js.

Other setup

Barba is build upon microbundle and is provided with an ESM and Modern version include in the package dist folder.

Intro Markup