Create badass, fluid and smooth transition between your website's pages.

barba.js is a small (4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages. It helps reducing the delay between your pages, minimizing br

Information

Category: JavaScript / Animations
Watchers: 134
Star: 10.5k
Fork: 491
Last update: Mar 27, 2023

Resource links

https://github.com/barbajs/barba

barba.js [v2]

Invite link to slack channel

Barba.js is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website's pages.

It helps reduce the delay between your pages, minimize browser HTTP requests and enhance your user's web experience.

Documentation

What's new?

Simplified API
Hook sytem for transitions and views
Transition resolution: declare your transitions and let Barba pick the right one
Use of data-barba attributes
Sync mode
Plugin system
- @barba/router: use of routes for transition resolution
- @barba/css: automatic addition of CSS classes
- @barba/prefetch: automatic pages prefetching (and caching), based on viewport
- @barba/head: update your <head> (coming soon)
- @barba/preset: ready-to-use basic transitions pack (fade, slide, …) (coming soon)

Main changes (TL;DR)

Barba now use data-barba-* attributes:
- data-barba-wrapper for the wrapper
- data-barba-container for the container
- data-barba-namespace for the namespace
2 main methods:
- barba.init() for transitions, views and Barba core settings
- barba.use() for plugins (router, css, prefetch, etc.)
Transitions:
- are plain JS objects
- are declared via the barba.init({ transitions })
- use "hooks" corresponding to animation steps
  - hooks can be synchronous or asynchronous (via this.async() or Promise based)
  - all hooks receive same data argument
- use "rules" to select which transition to use
  - default rules are namespace and custom
  - @barba/router adds route rule
  - they can be combined within from and to properties
Views:
- are plain JS objects
- are declared via the barba.init({ views })
- use a subset of animation "hooks":
  - beforeOnce, afterOnce, beforeLeave, afterLeave, beforeEnter, afterEnter
  - receive the same data argument
Sync mode will start leave and enter transitions concurrently

How to contribute

If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.

Thanks for taking time to contribute to Barba 🎉 👍

Contributors

^{Luigi De Rosa} ^🤔 ^💻 ^📖 ^💬 ^🐛 ^⚠️ ^👀 ^🚇	^{Thierry Michel} ^🤔 ^💻 ^📖 ^💬 ^🐛 ^⚠️ ^👀 ^🚇	^{Xavier Foucrier} ^🤔 ^📖 ^💬 ^⚠️ ^👀 ^🐛	^{Marco Grimaldi} ^🎨	^{Cody Marcoux} ^💬	^Phil. ^💬	^{Giorgio Finulli} ^💬
^Wouter ^🐛 ^💬	^{Mike Wagz} ^🤔 ^💬 ^⚠️	^{Red Stapler} ^✅ ^📹	^{Jérémy Levron} ^💬	^{Nguyen Van Anh} ^💻	^{Daniel Weber} ^💻	^{Jean-Marie Porchet} ^💻
^James ^💻	^Nicholas ^💻	^{Patrick Arminio} ^💻	^{A (from Sicily)} ^💻	^{Pavel Mazhuga} ^💬	^{Daniele De Matteo} ^💬	^{aswinkumar863} ^💬
^BounceIncHQ ^💬	^gordonwes ^💬	^{Evan Fleet} ^💬 ^🐛	^Jörg ^💡	^ZAAK ^💡 ^💬	^{Masahiro Tonomura} ^💡	^CassiusHR ^💬
^{Shane Murphy} ^💬	^{Dylan Reeves} ^💬 ^💡	^{Quentin Neyraud} ^💬	^tortilaman ^💬	^psntr ^💬	^{Kevin Clark} ^💬	^{Tadeas Kosek} ^💬
^{Gustavo de Andrade} ^💬	^Clinton ^💬	^{Dave Stockley} ^💬	^khaiknievel ^💬 ^🐛	^{Francesco Michelini} ^💬 ^💡	^{Domantas Petrauskas} ^💬	^{Kyle Brumm} ^💬
^{Oliver Belmont} ^💬	^{Lu Nelson} ^💬	^{Bram Cordie} ^💬 ^🤔	^{Michael Schouman} ^💬	^{Pascal Garber} ^💬 ^🤔	^{Federico Brigante} ^💬	^{Corey Lee} ^💬
^{Milan Simonovic} ^💬	^{Julien Vasseur} ^💬	^{Maciej Wrona} ^💬	^Terion ^🤔	^{Matt Seccafien} ^🤔	^{Max Schulmeister} ^🤔	^David ^🤔
^{Pierre-Henri Lavigne} ^🤔	^lsbyerley ^🤔	^{Guillaume M.} ^🤔	^{Oscar Otero} ^🤔	^{Nico Prat} ^🤔	^{Marco Solazzi} ^🐛	^atoupet-toki ^🐛
^Josias ^🐛	^{Oksana Romaniv} ^🐛	^{Olivier Guilleux} ^🐛	^{Liroo Pierre ᵈᵉᵛ} ^💻	^{Luis Martins} ^🐛	^Matthew ^🤔 ^💬	^{Simon Goetz} ^🐛
^{Luís Carvalho} ^💬	^{Samuel Berisha} ^💬

Next steps

16 Open More issues

Closed

Barba.js v2? Open discussion

Hi All! I am really happy to see more and more people using Barba.js. It's really nice to be able to give something back to the open source community.

I am also proud that in ~20 issues opened from users, there is not a single bug that has been encountered.

The library has been initially used just from myself, but now we should look ahead and see how the library could be improved in a eventually major release.

I think the design and the concept behind the library seems working very well, it's flexible and it's easily adaptable to the user's need.

What I think could really be improved are how the API methods are exposed, and the naming in general.

Can you help me?

I would like to have an open discussion and see what are your ideas about it:

What will you improve/change?
Have you encountered some library limits?
Do you find the website / documentation easily understandable?
Do you will like to have a new major version that will potentially break the compatibility with older code?
Do you use Barba.js in a ES6 project?

Thank you! 🎉

enhancement question discussion progress v2

opened Jul 8, 2016 by luruke 69

Closed

Update body class?

Is it possible to update the body class between transitions?

opened Aug 14, 2016 by mikespainhower 32

Closed

Page refreshed after timeout instead of redirected

The problem

When the server takes too long to answer from a fetch, the page gets refreshed instead of redirecting the user to the target page. It seems to be a regression since V2.8.0. I tested with versions 2.6.1 and 2.7.2 and both are working correctly. It's easy to reproduce by setting a very low timeout option value.

Description

See this screenshot using the version 2.8.0 where the problem occurs

See this screenshot using the version 2.6.1 without the problem

Steps to reproduce issue [ Good To Have ]

Broken demo

Go to: https://mamboleoo.be/barba/
Open devtools and simulate 3G slow connection
Click on test url
You stay on the same page instead

Working demo

Go to: https://mamboleoo.be/barba/old.html
Open devtools and simulate 3G slow connection
Click on test url
You are redirected to the target page

Environment

Barba version that exhibits the issue: ^2.8.0
Browser OS/version used: All

Thanks for having a look at this!

bug @barba/core

opened Nov 28, 2019 by Mamboleoo 26

Closed

Browser loads new page if a link contains an anchor

While using Barba I mentioned that my browser loads a new page when a link contains a hash (e.g. another-page.html#section1).

Scenario: I'm on page A.html. This page contains a link to B.html#anchor. If I click the link, the browser will load the page and not Barba. On page A.html is a second link A.html#somewhere. Clicking on this link should not trigger Barba but the browser to jump to #somewhere.

After investigating the source code I found out, that Barba doesn't handle clicks on links with a hash but letting the browser performing the event. See https://github.com/luruke/barba.js/blob/188de0364c1cc3e046fb389fdd36cb53303800bf/src/Pjax/Pjax.js#L190 which will check if Barba manages to get the new page or ignore the click. And here https://github.com/luruke/barba.js/blob/188de0364c1cc3e046fb389fdd36cb53303800bf/src/Pjax/Pjax.js#L232 it decides to ignore the request.

The comment on line 231 suggests that links with a hash shouldn't be handled by Barba because the browser should jump to the anchor. However there should be a check, that the target link equals the current link (without a hash). If it does not it's obviously another page.

But when changing this behavior how will be the anchor "jump" be handled? Maybe by adding the hash via window.location = "#hash" after the new page was loaded? This could be realized with Promises?

bug progress v2

opened Aug 18, 2016 by jdoubleu 24

Closed

CF7 Wordpess reload

Hi there, and thank you for developing this framework! I have an issue with Wordpress CF7 forms...if i load the page for the first time form works correctly, but if i change page and try to send a form it doesn't work in AJAX and it reloads page changing url to urlpath/#form_id. Can you help me solving this? Thanks a lot!

opened Feb 20, 2017 by biazo 22

Closed

Popstate events doesn't call hooks when url have query string

The problem

when using back / forward while the url have a query string, barba doesnt fire any events, therefor we cant get the https://barba.js.org/docs/advanced/hooks/#data-properties data.trigger to manually force reload the page.

Steps to reproduce issue [ Good To Have ]

setup barba hooks before, after and log their data
create 3 links 2 with a query string & 1 without
click the normal link first
then click the 2 qs links
now press the back btn and check ur console
url will change but the hook events wont fire, only when u get to the normal url, something will be logged.

Environment

Barba version that exhibits the issue: "@barba/core": "^2.9.7",
Build used:
- [ ] module (esm/)
- [ ] browser (dist/)
- [x] main (lib/)
Browser OS/version used: OSX 10.14.6 / Chrome 83.0.4103.97

@barba/core

opened Jun 11, 2020 by ctf0 18

Open

Prevent data attribute doesn't work on a `self` transition

When using a prevent data attribute on a link that run a self transition, the transition is not prevented.

Note that the prevent strategy work as expected, so currently you can prevent the transition from running by using event.preventDefault() followed by event.stopPropagation() inside the prevent callback.

bug @barba/core

opened Mar 15, 2023 by xavierfoucrier 0

Open

Accessibility : harmful live-region usage

I was considering using barba.js for projects but I'm a bit disapointed with the usage of the aria-live region set on the wrapper element. It was a good intention but to me it's more harmful than helpful as it is implemented.

SPA navigation are often a bit challenging for assistive technologies users but some patterns have been tested with real users. Live regions can be useful but you don't want the whole document to be read aloud by assistive technologies. Only a page title should be announed in those elements.

The focus may be moved too, but I guess it's more the responsability of the developer to listen for page transition event and do the right choice for its use case. The documentation may help to build appropriate patterns, without forcing an opiniated behavior.

bug @barba/core

opened Jul 9, 2022 by blokche 7

Open

Add support for custom XHR headers

Is there a way to add: xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest") to an BarbaJS request?

When I want to do an ajax call in Vanilla JS (without barba) I usually do:

var request = new Request(url, {
	headers: new Headers({
		'X-Requested-With': 'XMLHttpRequest'
	})
});
fetch(request)
.then(response => response.text())
.then(data => {
	console.log(data);
});

Whatever thanks for this super great lib.

enhancement @barba/core feature

opened Nov 15, 2021 by julesvaulont 3

Open

I can't get Barba CSS to work with Locomotive-Scroll

Hello all,

I would like to make Barba CSS work with Locomotive-scroll. I do a simple opacity transition and a smooth scroll. Both work perfectly separately but together it doesn't work anymore.

My code :

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

barba.hooks.after(() => {
  scroll.init();
});

barba.use(barbaCss);
barba.use(barbaPrefetch);
barba.init()

While examining the dom, I noticed that at the change of page my <div data-barba = "container"> go out of my <main data-scroll-container>

Why does it do that? This problem happens when I use the @barba/css plugin, without it everything works.

Thank you in advance for your help

question @barba/css

opened Sep 9, 2021 by bossybe 4

Open

Mouseover prefetch ignoring prefetched urls through Barba.prefetch()

Hi, I'm using Barba.prefetch() to prefetch a specific single URL that is a little bit heavy (I don't need to prefetch the other viewport urls, so I'm not using barba/prefetch), and I've realized that when mouseover the link with the exact same URL, it gets loaded again, so I'm loading it twice when it should do nothing as it's supposed to be prefetched already.

I've inspected both xhr loads and they are identical, it's just that it does it twice...

Is this a normal behaviour? If so, how to succesfully prefetch a url and avoid loading it again through mouseover?

Thanks

@barba/core

opened Aug 5, 2021 by migueltrias 6

Open

Add custom data to `barba.history`

It seems to be not possible to add custom data to the barba.history using pushState as the state gets overwritten by barba.js own data. There is currently no methods provided to do that.

browse to any page push some data

window.history.pushState('{"random_data":1}', '', `?new_random_state`);

check that data is there:

history.state
"{\"random_data\":1}"

click on any link click on previous button check history.state;

history.state

we lost all data previously added and history.state just contains other barba.js data:

{from: "barba", index: 0, states: Array(1)}

enhancement @barba/core

opened Jun 23, 2021 by goyavo 4

v2.9.7(Dec 31, 2022)

What's new? :bearded_person:

Brand website, always up to date — https://barba.js.org/
Simplified API, with tree shaking support and TS definitions
Hook system for Transitions and Views
Transition resolution, to declare your transitions and let Barba pick the right one
Use of data-barba-* attributes, that you can easily customize
Sync mode, to build cross animated transitions between pages
Plugin system
- @barba/router : use of routes for transition resolution
- @barba/css : automatic addition of CSS classes
- @barba/prefetch : automatic pages prefetching (and caching), based on viewport
- @barba/head : update your <head> (coming soon)
- @barba/preset : ready-to-use basic transitions pack (fade, slide, …) (coming soon)

Sponsorship

It is now possible to support this project by sponsoring BarbaJS maintainer on Github. Even if it's a small contribution, you participate in the effort of making open source projects maintained for anyone, and developers to be rewarded for their work/time.

Feedback

Feel free to report any issue or feature request, thanks! :+1: Send us your project and showcase the amazing transitions you built using Barba!

Source code(tar.gz)
Source code(zip)

@barba/[email protected](Mar 17, 2019)

Enable NPM @latest for the beta release.

Source code(tar.gz)
Source code(zip)

1.0.0(Sep 11, 2016)

Wow, i've been really busy recently but I managed to get out Barba.js v1.0! 🎉

Some stuff in this version:

Support for download attribute.
Support for xlink:href attribute (introducing a new method Barba.Pjax.getHref).
Add new parameter to linkClicked event, now you receive the event. Thanks @anhskohbo .
Add new parameter to newPageReady event, now you have the full raw HTML of the page loaded.

Source code(tar.gz)
Source code(zip)

0.0.10(Jun 25, 2016)

Lots of little stuff in this version!

Improve JSDoc annotations
Add little npm command to measure filesize of the library (minified and gzipped)
Improve visibility and display toggling (@ZachSaucier)
Improve/add unit testing
Add basic E2E tests with nightwatch
Improve accessibility adding aria-live attribute
Add cdnjs as install option
Little code cleanup

🏁

Source code(tar.gz)
Source code(zip)

0.0.9(Jun 5, 2016)

Init Unit testing with Karma and with istanbul as coverage tool
Integrate Travis and Coveralls
Improve generated documentation
Add the possibility to specify a timeout for the xhr requests (Barba.Utils.xhrTimeout, by default 5000ms)
Rename Barba.HistoryManager.states in Barba.HistoryManager.history

🏁

Source code(tar.gz)
Source code(zip)

0.0.8(May 29, 2016)

Update dependencies
Make easy to change data-namespace, .barba-container and #barba-wrapper
Update docs

Source code(tar.gz)
Source code(zip)

Library for transition animations between blocks (pages) in the application.

A CUDA implementation of Lattice Boltzmann for fluid dynamics simulation

A fluid grid of square units.

☄️ An extreme light-weight react transition animation hook which is simpler and easier to use than react-transition-group

Keynote-style Magic Move transition animations

My attempt at fluid simulation with the Navier Stokes equations

🚀 Smooth Liquid Swipe Animation to transition between different components.

viewpager with parallax pages, together with vertical sliding (or click) and activity transition

A badass notion theme. Name inspired by the words glass and notion

[Not Actively Maintained] A wrapper for smooth-scrollbar to React Component

A light Shared Elements Transition lib for Android.

pdf-lib - Create and modify PDF documents in any JavaScript environment

Allows the easy creation of animated transition effects when the state of Android UI has changed

Modern fluid typography editor

Transition between a circle to a square. ⚪️→ ⬜️

Bash to deploy GitLab Pages in a branch like gh-pages

Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

Expandable TextView With Smooth Transition Animation

OpenFOAM is a free, open source computational fluid dynamics (CFD) software package

Research-oriented differentiable fluid simulation framework

Euler fluid simulated with CPP and SFML

Share this repo

Related Repos

Animations

3.6k

JavaScript implementation of the Web Animations API

What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation

Animations

3.4k

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS su...

TweenJS TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent

Animations

A lightweight javascript library for WeUI.

weui.js 概述 WeUI 的轻量级 js 封装。注意：由于微信小程序不支持dom操作，所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本，详情请看：https://github.com/Tencent/weui-wxss/ 手机预览 https://weui.io/w

Animations

Textureless fog particles using a highly customizable shader to attenuate noise values.

Atmospheric GPU Fog Particles Textureless fog particles for Unity using a highly customizable shader to attenuate multiple layers of noise. Works grea

Animations

1.5k

SQL Formatter is a JavaScript library for pretty-printing SQL queries

SQL Formatter is a JavaScript library for pretty-printing SQL queries. It started as a port of a PHP Library, but has since considerably diverged.

Animations

It is a JavaScript library, which contains many beautiful and free text effects.

TxtAnime.js It is a JavaScript library, which contains many beautiful and free text effects. Demo Installation npm npm install txtanime.js --save //

Animations

A list of addictive applications to avoid, reasons for why they are addictive, and how to ...

addictive-apps A list of addictive applications to avoid, reasons for why they are addictive, and how to protect yourself from falling to addiction. I

Animations

You'll find the guide how to create dynamic marquee effect in this demo.

Cuberto Marquee Effect Demo Frontend dependencies GSAP (https://greensock.com/gsap/) Setup demo project Install npm install Start develop server gulp

Animations

Prop and Animation developer tool

propanimenu Prop and Animation developer tool Dependencies menuv nh-keyboard a fork of nerohiro version with before keyup update Usage Commands /propa

Animations

Webbased Character Animation System

ossos Character Animation Library This project focus is to allow animating 3D character in web application, games, metaverses, etc that are rendered i

Animations

1.2k

🏆 WebRTC with integrated SFU server. Video calls, messaging, screen sharing, recording an...

🏆 WebRTC with integrated SFU server. Video calls, messaging, screen sharing, recording and more.🏆

Animations

1.2k

🔮 CSS loading animations made with single element.

Animations

An algebraic effects library for javascript and typescript using generators

Algebraify Algebraic Effects Are Here! (sort of) (If you're unfamiliar with algebraic effects, here's a great article: Algebraic Effects for the Rest

Animations

9.3k

The lightweight library for manipulating and animating SVG

SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst

Animations

426

The famous Matrix rain effect of falling green characters in a terminal