Reinitialize Webflow IX2

hey @lengua.

as i have a little more complex transitions going on, i had to call the code inside the extended transition object. just after the this.done(); statement. but i guess this might be a little more advanced. i think its easier to just put it inside the transitionCompleted event listener. this way it will reset all webflow interactions after the transition has finished and the old container has been removed from the dom.

Barba.Dispatcher.on('transitionCompleted', function(currentStatus[, prevStatus]) {

    Webflow.require('ix2').init();
});
2 Likes

Do you have may be sample demo page to share with rest of group :slight_smile:
I’ve seen lots of thread IX2 and Barba combination but not single sample page …
That would help a lot to me and to others.
thanks a lot !

2 Likes

coming in december/january hopefully!

2 Likes

I was able to get it to work like this:

var Webflow = Webflow || [];
Webflow.push(function() {
    $('html').attr('data-wf-page', 'PAGEIDFROMHTML');
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require('ix2').init();
    document.dispatchEvent(new Event('readystatechange'));
});

Just replace PAGEIDFROMHTML with your page id like 5c2e9e6e9bc27a5914421475

Thank you all for your help!

@mastermindesign that worked for me! You are amazing.

1 Like

Also just FYI, I was having problems when using different interactions at different breakpoints so to combat this I made an event listener with a debounce for 500ms for when the page resizes to re-initiate the interactions:

I’d be interested if someone has a better idea on how to do this, but for now this works fine for me:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    // IX 2 Fix for loading animations when the site loads
    $('html').attr('data-wf-page', 'PAGEIDFROMHTML');
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require('ix2').init();
    document.dispatchEvent(new Event('readystatechange'));

    // IX 2 Fix for if you have different interactions at different breakpoints
    var resizeTimer;
    $(window).on('resize', function(e) {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        //When the page is resized re-start animations
        document.dispatchEvent(new Event('readystatechange'));
      }, 500);
    });
  });
</script>
3 Likes

Hi @mastermindesign, I tried all code examples in this thread but I can’t seem to figure out how to make the reinitialize ix2 work. Been following this thread for quite a while now and I’m hoping for some help here.

I made a simple 2 page example where the barbara.js is working with a simple page transition. I added some example animations to test the reintialize, but that’s were i’m stuck.

Example page: https://test-project234.webflow.io/
Read link: https://preview.webflow.com/preview/test-project234?utm_source=test-project234&preview=e146d65f5e56e16c86392f04993caf56&mode=preview

The animations work on page refresh but when navigating back and forth none of the animations work (except for the hover state button).

I’m assuming the code you provided (below) should be in the custom code section (Footer Code) after the barbara.js code:

<script> var Webflow = Webflow || []; Webflow.push(function() { $('html').attr('data-wf-page', '5cfc240b69080766c023372f'); window.Webflow && window.Webflow.destroy(); window.Webflow && window.Webflow.ready(); window.Webflow && window.Webflow.require('ix2').init(); document.dispatchEvent(new Event('readystatechange')); });</script>

What am i missing here? :sweat_smile:

Hi, bumping this…

Does anyone know how to reinitialize IX2 with Barba JS? Calling the code @mastermindesign shared inside the transitionCompleted Barba event listener doesn’t seem to work:

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) {
  
  var Webflow = Webflow || [];

  Webflow.push(function() {

    $('html').attr('data-wf-page', '5cf5f7879ccad20b42ab4da7'); //page ID from HTML

    window.Webflow && window.Webflow.destroy();

    window.Webflow && window.Webflow.ready();

    window.Webflow && window.Webflow.require('ix2').init();

    document.dispatchEvent(new Event('readystatechange'));

  });

I have a simple page load animation that doesn’t fire when using Barba to navigate back to the home page :frowning:

Thanks for any help!

Published link:
https://portfolio-new-40f33pp.webflow.io/
Read link:
https://preview.webflow.com/preview/portfolio-new-40f33pp?utm_medium=preview_link&utm_source=dashboard&utm_content=portfolio-new-40f33pp&preview=bf31f30edb11771a6c17edf55a874ae6&mode=preview

Hi, I was presenting similar problems when loading dynamic content inside a VueJS instance which contains a IX2 animation. When an IX2 animation is inside a VueJS container it stops responding. This is to be expected due to VueJS shadow DOM I presume

Webflow.require(‘IX2’).init() works perfecly fine to regain give back control of the animation to Webflow engine.

My question is, how do you execute the trigger defined in the animation, is it using the actions object? If so, could anyone show an example? Thanks in advance

Hey,

Is the ix2 reinitialize also something i can use without barba.js?
I’m building a rather complicated section with three hover buttons that hide and show certain stuff and move columns around. So no page transitions.
Then I have another hover element which is basically the hover-out. It resets everything. This works. But only once. After that the hover buttons act strange. I have been trying to solve this with ix2 itself but I don’t get it to work.
It would be great if there was a script that resets all the animations. Empty’s the dom etc. So that de buttons work the same as the first time after pageload. This script would be triggered when hovering the “hover-out” element.

Makes sense?
Thanks in advance.
(I can give the read only link… but things are pretty messy right now ;-))

Never mind… :slight_smile: I somehow got it to work the way I want with the native animation settings.

You need a combination of two things:

  1. Add the html attribute “data-wf-page” with your specific id.

Example:
image

  1. retrigger ix2 with the following code:
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require(‘ix2’).init();
    document.dispatchEvent(new Event(‘readystatechange’));

Hi @sebastianjung, thnx for your reply!

Still not triggering any new page interactions :frowning: A working example or if you could take a look would be great.

What i got so far: see my shared project - or the published page On the second page none of the webflow interactions are working.

  • in the Head Code inside the dashboard: i load the barba.js code which works.
  • in the Footer Code i first initiate the barba transition code
  • after that in the same Footer Code i try to run the reinitialize script with the data-wf-page id. But i’m unclear if this is the right order, or if this should be initiated inside the transition script or inside the barbara function.

@socraticus @Harry_B @mastermindesign any luck with this?

I’m sorry if i made false hopes but i am not using barba.js but nuxt.js instead :confused:

Looked at your example but don’t know enough about barba.js’ internals to be of any help i guess.

good luck though =/

Hey Guys,

Now I’m on this task too that most of you guys don’t seem to have solved yet. I’m using barbajs v2 and I’m trying to make normal interactions of webflow work again after the page transition is done.

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

However so far no luck. I don’t know how I could possibly make the normal interactions work with this. E.g. in my case I have a scroll animation on a page I’m navigating to. If I reload the page normally in the browser all interactions work, however if I navigate with a link click and barba events take over the interactions never re-initialize and fire.

I guess a lot of users would be really eager to find a working solution for this as this is not only important with barba but also other libraries.

Thanks, Matt

FYI, I moved over to a new thread with this as I’m simply not able to resolve this: Reinitialize Webflow with Custom Code

I realise I’m years late to the party here, but wanted to say thank you for your comment here. Hooking into the store and dispatching an action with a new state was the only way I have been able to properly reinitialise a Webflow animation. Thanks!

1 Like

@andy_burke Is there a way to dispatch an event to open the cart wrapper?

Any assistance would be greatly appreciated. Thanks!

Thank you sooooo much, you saved my day!

Hello friends, I see this still hasn’t been answered so here it is:

Webflow.require(‘commerce’) && Webflow.require(‘commerce’).init({siteId: “ENTER-THE-SITE-ID”, apiUrl: “https://render.webflow.com”});