Reinitialize Webflow with Custom Code

This seems like somewhat of the same problem, but someone in another forum topic seems to be able to reintialize PJAX (wich is part of the same library as barba?). Not sure if this is any help, but perhaps that solution might also work for barba.js?

Seamless pagination with "pjax" - #61 by steelwool @mtmt @jasondark anyone able to confirm this perhaps?

How are you getting the ‘data-wf-page’ attribute? I may be wrong here, but it seems like each page within your Webflow project has a unique ‘data-wf-page’ attribute, and that reinitializing interactions uses that attribute to determine which interactions and elements to target. As a result, I believe that you need to grab the ‘data-wf-page’ attribute from the destination page, then set the current page data-wf-page attribute to match the destination one. I was able to do something like that using the pjax library, and seem to be having success with it so far.

All of this is very interesting, but it seems that many people like myself use webflow to avoid heavy level javascript and coding.

Say for example, i use WF interactions and want to add the interactions to my wordpress site because webflow interactions are so great and easy – does anyone have a simple solution/tutorial on what to do?

Would be great if webflow had some advanced tutorials specific to solutions such as this and others for people who export code. does not even need to be video just a place on github would be fine.

or even codepen.

sg

Hi @mtmt :wave: sorry I’m late to the party.

After looking over the Barba.js docs here: barba.js

It seems that you should be able to do something like this:

barba.init({
  views: [{
    enter(data) {
      // Update page ID to the next page
      const pageId = ''; // may need to query data.next.html for data-wf-page attribute
      document.documentElement.setAttribute('data-wf-page', pageId);
      
      // Reinitialize webflow modules
      Webflow.destroy();
      Webflow.ready();
      Webflow.require('ix2').init();
    }
  }]
});

Keep in mind that the data-wf-page is required for IX2 to be able to target certain elements on the page. You may be able to bypass this requirement if you strictly use class targets in IX2 settings.

2 Likes

For Barba Lovers: The issue we found, which I believe was mention previously, is that you need to add the pageID when you initialize ix2. I have a solution that we used for thedigitalpanda.com, based on the original solution posted here some time ago. We are using this for all our new projects as well. It is a bit messy if the Webflow team ever decides to change the way they name their page attributes, but it works great right now. I took a few pieces out to clean it up, so please let me know if it doesn’t work.

$(document).ready(function() {
 var pageID;
     
 barba.init({
            transitions: [{
                sync: true,
                beforeLeave: function(data) {
                    let end = data.next.html.indexOf(' data-wf-site="');
                    let start = data.next.html.indexOf('data-wf-page="');
                    let string = data.next.html.slice(start, end);
                    let arr = string.split('"');
                    pageID = arr[1];
                    
                },
                leave: function(data) {
                      const done = this.async();
                      //do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
                      done();
                  },
                beforeEnter: function(data) {
                    $('html').attr('data-wf-page', pageID); 
                    window.Webflow && window.Webflow.destroy();
                    window.Webflow && window.Webflow.ready();
                    window.Webflow && window.Webflow.require('ix2').init();              	
                }
        }]
      });
     });
1 Like

Not sure if you ever got this to work, but this comment in this thread here solved it for me. You seem to have to hook into the redux store and disptach an update action containing a payload with the new state you want. To reset your animation back to default you would need to do some experimenting to see what the state looks like on page load etc.

Hey @DigitalPanda I have this code on my Code Footer, but barba.js is not working at the moment:

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

<script>
var pageID;
     
barba.init({
            transitions: [{
                sync: true,
                beforeLeave: function(data) {
                    let end = data.next.html.indexOf(' data-wf-site="');
                    let start = data.next.html.indexOf('data-wf-page="');
                    let string = data.next.html.slice(start, end);
                    let arr = string.split('"');
                    pageID = arr[1];
                    
                },
                leave: function(data) {
                      const done = this.async();
                      //do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
                      done();
                  },
                beforeEnter: function(data) {
                    $('html').attr('data-wf-page', pageID); 
                    window.Webflow && window.Webflow.destroy();
                    window.Webflow && window.Webflow.ready();
                    window.Webflow && window.Webflow.require('ix2').init();              	
                }
      }]
    });
</script>

Did I miss any part of the code? Is this the complete code snippet? Much appreciated, thanks!

@leonardomattar did you setup the containers in the designer, as per the barba documentation? You will need to wrap every page with two containers.

Hey Ilya, thanks for responding so fast. I did this setup with the barba-wrapper and barba-container. Is it cool if a private message you with a read-link?

No problem. Send it over.

1 Like

Thanks Ilya, I sent it to you, not sure if you received it. :pray:

@leonardomattar Instead of having barba-container and main as css classes, you need to add them as custom attributes. You can add one to the body and one to the wrapping div.

for structure here is an idea:

YOUR NAV ALL THE CONTENT
1 Like

Hey @DigitalPanda ah I see! So when I add the attribute, how should I fill these camps on the body and on the wrapping div:

body (custom attribute):
Name: data-barba
Value: barba-wrapper

wrapping div (custom attribute):
Name: data-barba
Value: barba-container

Like this, right?

This should do it…

body (custom attribute):
Name: data-barba
Value: wrapper

wrapping div (custom attribute):
Name: data-barba
Value: container

And

Name: data-barba-namespace
Value: WHATEVER-YOU-WANT-TO-NAME-THIS

1 Like

Hey @DigitalPanda I just applied this on 5 pages: Home, work, services, process, about. It is not working at the moment. Can you check if I missed anything?

I didn’t realize that you were not initializing this when the page is ready. that seems like the issue since the console says that “barba is not defined” also please check the

Please wrap with
$(document).ready(function() {
//BARBA CODE
});

1 Like

I think I’m doing something wrong because it is not working, I’m not great with js, right now I have this on code footer:

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

<script>

$(document).ready(function() {
 var pageID;
     
 barba.init({
            transitions: [{
                sync: true,
                beforeLeave: function(data) {
                    let end = data.next.html.indexOf(' data-wf-site="');
                    let start = data.next.html.indexOf('data-wf-page="');
                    let string = data.next.html.slice(start, end);
                    let arr = string.split('"');
                    pageID = arr[1];
                    
                },
                leave: function(data) {
                      const done = this.async();
                      //do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
                      done();
                  },
                beforeEnter: function(data) {
                    $('html').attr('data-wf-page', pageID); 
                    window.Webflow && window.Webflow.destroy();
                    window.Webflow && window.Webflow.ready();
                    window.Webflow && window.Webflow.require('ix2').init();              	
                }
        }]
      });
     });
</script>

Am I missing something in this code or am I missing something else?

Thanks for all the help, much appreciated!

The console still says ‘barba is not defined’, I actually have no idea how to fix this part :upside_down_face:

It’s so close to work, I just need to understand how to fix the code, something is missing there.

Last update, I got to fix the ‘barba is not defined’ but it still bugs the page load animation after trying to go back to the home after seeing it once and there is no transition on the page change it is happening instantly, is there a way to fix these 2 things?

I will post the code I am using below:

    <script type="text/javascript" src="https://uploads-ssl.webflow.com/5f7d0d579293d5927760a28d/5f7e40d6a5e058298319955d_core.txt"></script> 

    <script>

    $(document).ready(function() {
     var pageID;
         
     barba.init({
                transitions: [{
                    sync: true,
                    beforeLeave: function(data) {
                        let end = data.next.html.indexOf(' data-wf-site="');
                        let start = data.next.html.indexOf('data-wf-page="');
                        let string = data.next.html.slice(start, end);
                        let arr = string.split('"');
                        pageID = arr[1];
                        
                    },
                    leave: function(data) {
                          const done = this.async();
                          //do some crazy outro animations using GSAP or ANIMEJS (our fav), then place the following in the complete callback:
                          done();
                      },
                    beforeEnter: function(data) {
                        $('html').attr('data-wf-page', pageID); 
                        window.Webflow && window.Webflow.destroy();
                        window.Webflow && window.Webflow.ready();
                        window.Webflow && window.Webflow.require('ix2').init();              	
                    }
            }]
          });
         });
    </script>

Now that the code is initializing, you will need to implement animations between states. Unfortunately, that will take a LOT of time to explain if you don’t have a lot of experience in JS. I recommend hiring some outside help on that one :slight_smile: