Custom reload of Webflow Interactions for barba.js

Design help Custom code
1

hey people.

i guys this is a pretty advanced coding question.

i am trying to add barba.js to my webflow site.

barba.js is a library that enables smooth transitions between your pages by actually faking reloads. when you click a link, it swaps the content of your current page container with the content of the next pages container and also updates the url. repeating elements like the navbar or footer don’t need to be reloaded. you see huge enhancement in page load times and can also animate the transition between pages without the white flash. you can find examples of the plugin here.

this is what i got so far. click on the images to go to the next page and back. i added an animation to the first link and no animation to the second link. just to see its working. the thing is… as the library is not really loading the next page and its scripts (including webflow interactions) you only get to see webflow interactions on the first page and not on the ongoing pages. thats why i want to reload the interactions from the .js file generated by webflow after every page transition.

when i copy the code (staring with Webflow.require('ix').init) it works beautifully. but i have to add this manually. so when i add or change an interaction within webflow i have to copy every code change to my custom code. i would like to do this automatically. so i thought about reloading the webflow.js file after every page transition. but i get an error message saying Uncaught TypeError: n is not a function.

is anyone aware of a method on how to reload that script correctly? do i have to clean up the old code at first?

hopefully someone reads this as its pretty complex.
thank you so much for your time!

jaro
:sunny:

2 Likes
3

Hey Jaro,

this script looks really handy… did you get it to work?

I have been using this for restarting the webflow-JS after ajax calls on our site:

$( document ).ajaxSend(function() {
Webflow.destroy()
});

$( document ).ajaxComplete(function() {
Webflow.ready()
});

Something similar should work here.

Let me know hot it goes!

Cheers
Chris

BTW you German?

1 Like
4

@CallMeChris
You are a genius! I finally got it to work thanks to you. Wow. This has helped me a lot!

And yeah, I am german. Why are you asking? :blush:

5

Ha, Awesome!

just wondered because of your nick name and because I’m German, too, — located in Vienna, though.

Do you have a personal site I can check out?

6

I wrote you a pm. :blush:

7

Hi. Can you add the final initialize code - that work for you (what you put before body). To help other users in the future. Thanks!

8

Of course. Wanted to do that anyway.

1. Structure your site correctly
11
27
barba-container class inside an element with barba-wrapper id.

2. Custom Code
Add the following to your Footer Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" type="text/javascript"></script>

<script>
$(document).ready(function($) {
          
//Barba.js
//Please note, the DOM should be ready
          
Barba.Pjax.start();
Barba.Prefetch.init();
          
          
var HideShowTransition = Barba.BaseTransition.extend({
          start: function() {
            this.newContainerLoading.then(this.finish.bind(this));
          },

          finish: function() {
            document.body.scrollTop = 0;
            this.done();
          }
});  

Barba.Pjax.getTransition = function() {
          return HideShowTransition;
};

});
</script>

There you go. That should work for a basic Hide/Show transition without animation. If you want your pages to fade, just change it (explanation here).

Feel free to ask if you run into any problems.
:blush:

2 Likes
9

Hello, and thank you for this. Speaking of structure, the barba-container is the container to reload, and the wrapper is where it will be displayed?
And what about this code that @callmechris suggested you?
$( document ).ajaxSend(function() {
Webflow.destroy()
});

$( document ).ajaxComplete(function() {
Webflow.ready()
});

Sorry for the silly question, but I am starting to design my new website, and I want to plan how to do thing ^^

10

hey manuele.
yes, thats right. only the container inside the wrapper will get loaded when you navigate through your site. navbars or footers for example should therefore be moved outside the wrapper.

the code @CallMeChris suggested is needed in order for the weblow interactions to work. but this only works with ix1 (legacy) not ix2. i did not find a solution for ix2 yet.

1 Like
11

Thank you for your reply! I will try to sort it out something for the IX2. If it works I will share in this thread ^^

2 Likes
12

Hey guys,

I am running into this same issue with the triggers and interactions breaking once I have successfully implemented Barba. Anyone able to solve this ?

Adam

13

Does Barbajs work with Webflow, if I do the animation in “When Page Starts Loading” and "When Page Finishes Loading? I would love to build every website with page transition, but I dont want my navbars to refresh.

14

any luck with IX2 interactions ?

1 Like
15