Reinitialize Webflow with Custom Code

[mtmt]

Hey guys,

please forgive my “duplicate post” (Reinitialize Webflow IX2) but I’m raising this question here to maybe get help from a broader and “newer” audience. I guess my problem as also seen in the linked thread is a big one for most people and appereantly Webflow.ready(): does not seem to work anymore.

No matter the custom code library one uses this might be of interest to a brought audience how to make sure Weblow Interactions can still be triggered and work after for instance using something like barba.js v2.

barba.init({
  sync: true,
  
  transitions: [{
	
	async leave(data) {
      // ON LEAVE DESTROY WEBFLOW ???
	  Webflow.destroy();

      const done = this.async();

	  pageTransition();
      await delay(300);
      done();
	  console.log('leave');
    },
	
	async enter(data) {
        // ON ENTER INITIALIZE WEBFLOW ???
		var Webflow = Webflow || [];
        Webflow.push(function() {
            $('html').attr('data-wf-page', '5e8363a55808c6fd7f381e9b');
            window.Webflow && window.Webflow.destroy();
            window.Webflow && window.Webflow.ready();
            window.Webflow && window.Webflow.require('ix2').init();
            document.dispatchEvent(new Event('readystatechange'));
        });

        contentAnimation();
	  	console.log('enter');
    },

    async once(data) {
    	contentAnimation();
		console.log('once');
    }
	
  }]
});

In my case I’m linking to a site that would have scroll interactions on the page, but when placing the code above I have no chance to making it work. I tried a bunch of solutions layed out here in the forum but no chance.

Can anyone help here as this would be crucial for my project.

Thanks,
Matt

---

Here is my public share link: LINK
(how to access public share link)

[jasondark]

Are you trying to trigger a Webflow interaction to start and stop via your own code?

[mtmt]

Hey,

I’m trying to start the interactions. I have custom page-transitions on the page with barbjs and then after the page transition I want to fire/trigger the webflow interactions, yes.

So to your specific question: YES.

Actually almost simpler then trigger A webflow interaction, I want to make sure all webflow interactions simply run normally.

[jasondark]

OK, so do you have something to hook into when your barbjs transition has finished? If so then you can use some disgusting hackery in your code to trigger a Webflow interaction to start when you want it to.

In Webflow, create a random div block. Now set it to display none, and give it an ID. Something clear like trigger is good. Next go to this div block’s interaction settings and set your interaction to trigger when the div is clicked on.

Then in your code, do something like this.

<script>
    const trigger = document.getElementById('trigger');

    // barbjs hook, transistion has finsihed...
    trigger.click();
</script>

It pains me that there is no proper way to trigger or hook into Webflow interaction events and I am suggesting you do something like this. But it’s the only way…

[mtmt]

Thank you, this is somehow super weird that something like that is only supported via “hackery”. But thanks anyway.

Any idea how I for instance could solve custom actions like on scroll reveal animations, etc.? I have the problem that I load the new page and no scroll reveal interactions work as if the wefblow scripts are not loaded in.

[mtmt]

And I have one more general Webflow understanding problem:

If I work with something like barbajs and basically use the plugin to link from page to page via ajax webflow apperantly never knows on what page I am.

I have a console.log statement in my barba leave code for instance and I do the following:

I’m on /work and click on /about. On /work the console.log statement shows that it’s coming from work:249, but on /about it also shows that it’s coming from work:249 … so Webflow does not know on which page I’m on if there is no hardrefresh it seems.

[dram (Alex Dram)]

You can try this for your main question.

[mtmt]

@dram Thanks, but this is barbajs v.1 … I already tried what the sample has. The sample uses

Webflow.destroy();
Webflow.ready();
Webflow.require('ix2').init(); 

Barba v2. has a different syntax and works differently: See

barba.init({
    transitions: [{
      once(data) {
            console.log('once');
      },
  
      // basic style
      leave(data) {
            // create your stunning leave animation here
            console.log('leave');
            Webflow.destroy();
      },
  
      // basic style
      enter(data) {
            // create your stunning leave animation here
            console.log('enter');
            Webflow.destroy();
            Webflow.ready();
            Webflow.require('ix2').init();
      }
    }]
  });

This does not work, no matter how I try. No matter where I put the destroy, ready and init functions it never works. Also doesn’t matter if I use different event-hooks of barba, there is also “afterEnter” and “after” which is fired way later, but still no effect.

[dram (Alex Dram)]

Damn. That’s too bad.

[mtmt]

Yeah, but does no one “know” a solution, or is there no solution?
Again, I guess this is not connected to barba js, but generally a “problem” I suspect.

[dram (Alex Dram)]

Probably could ask someone from WF like @danro who had some input in the previous topic.

[jasondark]

Webflow IX2 does not provide any way to hook into the event life cycle or to trigger an animation to start via custom code. At least not that I’ve ever found, or that is documented anywhere. You could try to unminify and unobfuscate their code to see if you can find a solution. Please report back if you get anywhere with that as I’d love to be able to solve this too

The only option I have ever been able to use is the spoofed click on a div trigger hack.

I would say that what you want to do is not going to work with Webflow.

[iwan_r (Iwan)]

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" @mtmt @jasondark anyone able to confirm this perhaps?

[steelwool]

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.

[Seth_Gitner]

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

[danro (Dan Rogers)]

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

After looking over the Barba.js docs here: https://barba.js.org/docs/getstarted/custom-code/

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.

[DigitalPanda (Ilya)]

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();              	
                }
        }]
      });
     });

[jasondark]

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.

[leonardomattar]

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!

[DigitalPanda (Ilya)]

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