Stack Overflow
Stack Overflow

Questions tagged [barbajs]

barba.js is a javascript library that helps you creating fluid and smooth transitions between your website's pages.

Barba.js

barba.js is a small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages.

Benefits

  • Possibility to create nice transition between pages enhancing the user's experience.
  • Reduce HTTP requests. (why reload the css/js at each page change?)
  • Possibility to speed up the navigation using prefetch and cache.

Useful Links

Tags

88 questions
8
votes
1 answer

Using the same method multiple times in a row

Context: I'm using barba js to make some page transitions on a wordpress website, and i have to load some scripts everytime the page changes, mainly some js/css files from a wordpress plugin so that ajax search works. I made a method that receives…
Pedro Ferreira
  • 301
  • 3
  • 11
6
votes
1 answer

Source map error: Error: request failed with status 404 Resource URL: https://cdn.jsdelivr.net/npm/@barba/core@2.9.7 Source Map URL: barba.umd.js.map

I'm trying to install BarbaJS with a JS bundler for my GitHub-hosted website. Using CDN, I include a line that installs BarbaJS but when I open the website I get a source map error: Source map error: Error: request failed with status 404 Resource…
lam-sauce
  • 61
  • 1
  • 1
  • 2
5
votes
2 answers

Cannot get Barba JS transition to work on page change

I'm trying to get Barba JS, alongside GSAP, implemented on my React website. For reference, I have followed this video tutorial here, this tutorial of course, is not in React. Here is my folder structure which showcases all of the relevant files for…
Freddy
  • 683
  • 4
  • 35
  • 114
3
votes
2 answers

Reloading JS scripts on page (transition) change when using Barba JS

I'm trying to implement barba.js on a HubSpot site. Consider the following two pages: Resources Customers With my current barba.js implementation, this is the current flow I'm experiencing: I access the resources page (not by transitioning to it,…
Freddy
  • 683
  • 4
  • 35
  • 114
3
votes
1 answer

Barba.js (v2.9.7) reloads current page instead of next one

I am trying to use Barba.js for the first time. I basically want just one transition for every page (transition div displaying data.next.namespace slides in and out). The only exception is a preloading screen occurring only once on first page…
Vito
  • 179
  • 1
  • 14
3
votes
1 answer

Barba.js for page transitions Error: "failed push state attempt"

I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be…
Eric
  • 35
  • 4
3
votes
0 answers

In my website I have added barba.js, the issue is when i go to next page barba animations working but other javascript functions are not working

I have a website and in my html code I have added barba.js, If I go to inner pages barba animations are working fine, but other javascript functions are not working. So i added this barba script in html page, $('document').ready(function(){ …
Sankar S
  • 59
  • 1
  • 8
2
votes
1 answer

Cannot import barba.js in sveltekit

This is my +layout.svelte file:
Yajat Vishwakk
  • 80
  • 1
  • 8
2
votes
0 answers

Reload inline and src defined scripts during AJAX page transition

I'm trying to implement barba.js on a HubSpot site. Issue with HubSpot is that it renders our js related to forms or js related to custom modules within