Reinitialize Webflow with Custom Code

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:

Hey @DigitalPanda, thanks for all the help, much appreciated!

One question though, what about the Page load animation, is there a way to fix it? I thought with your code it would fix it. I’m having that problem it loads ok on the first time and then If I try to reload it, it doesn’t work anymore.

Hey @leonardomattar we never actually implemented “page load” functions on webflow. We used custom transitions and loading using animejs.

Ah I see @DigitalPanda, that makes sense. I don’t think anyone got to implement barba while using Webflow’s Page load animation, thanks.

Seems to have gotten webflow animations to work with Barba page loads.
Used this post here -

And moved most of the next actions to afterEnter in the Barba action.