Reinitialize Webflow IX2

trying to do the same with Barba but the transitions are broken…

Hi, Has anyone found a solution for this. I’ve been having a similar issue, this is what I’ve done so far:
I’ve setup buttons that load pages “page1” & “page2” using Barba.js. The pages are loading and transitions between pages are working but the content that is loading into the barba-container is not responsive. Click events & gsap animations that are in the html embed panel are not working.

Hope this explanation makes sense, I’ve also included a share link below. Thank you!

I’ve set up a test file (https://preview.webflow.com/preview/barba-3fedff?preview=ea1f49029092a0f950bc43ad0f0c4650).

and here is the published link - http://barba-3fedff.webflow.io/

Gonna bump this cause its a thing.

I integrate with firebase to load some larger datasets that CMS isn’t designed for… I lazy load so as to save on reads (obviously), and I need a way to reinitialize the interactions.

I have reverted to v1 interactions and destroy() / ready() after each dynamic load … which kinda sucks and also creates some frustrations with regard to state. (since click interactions aren’t toggles but rather “first click / second click”

We need a way to reinitialize v2 interactions. Better yet, would be nice to have a way to simply troll the DOM (or a particular dom element) and add the interaction listeners as needed.

Hey, also need this functionality for a SPA. I looked through the ix2 interface, tried calling Webflow.ready(), etc.

Any word on this?

Hi all, sorry for the delayed response on this topic. As you’ve discovered, IX2 doesn’t quite work the same as the rest of our code that supports the Webflow.ready/destroy cycle.

While Webflow.destroy() does in fact stop the IX2 engine and all associated events + state… the ready() function does not re-initialize the engine.

Webflow.require('ix2').init() should do the trick in most cases. As long as IX2 has been initialized once with the serialized JSON data, repeated calls to init() will simply restart the engine and query the DOM for any new nodes that may be affected.

4 Likes

@Reed_Debaets Re: partial state reloading, unfortunately we do not yet support this.

However, if you are familiar with Redux stores, you may be able to figure out how to re-populate the IX2 state, since we publicly expose the IX2 store + actions. Here’s an example:

const store = Webflow.require('ix2').store;

let oldState;
store.subscribe(() => {
  const ixSession = store.getState().ixSession;
  const eventState = ixSession.eventState;
  if (oldState !== eventState) {
    console.log(eventState);
    oldState = eventState;
  }
});

Using the above should output any IX2 event state changes such as hover or second click. Once you figure out which event’s state you’d like to modify, you can simply dispatch an action to the store. Here’s what a second click state restore might look like:

const actions = Webflow.require('ix2').actions;
store.dispatch(actions.eventStateChanged('e:0', {clickCount: 1}));

Hope that helps!

4 Likes

yuhuuuu! finally. thank you so much @danro. will definetly try this on the weekend. <3

Unfortunately, this doesn’t seem to be working for me. (Once in a while, when breakpoints are set, it will work.)

I think the issue is that I have anims triggering off PAGE_START, which I don’t think is being re-emitted with ix2.init().

Is there a way I can just emit PAGE_START into Webflow/ix2 somehow?

This seems to have done it for me:

window.Webflow && window.Webflow.require( 'ix2' ).init();
document.dispatchEvent( new CustomEvent( 'IX2_PREVIEW_LOAD' ) );
1 Like

Hey @andy_burke looks like you’re on the right track. You can also simulate the native event, since that’s what PAGE_START/FINISH rely on:

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

Hi @andy_burke, i’m trying to figure out the same thing. Is that code you posted something that should be added inside the barba.js transition function before the _this.done(); or somewhere else? @buntestrahlen did you had a chance to look at this solution?

I ended up with this and it seems to be working as I would expect:

window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require( 'ix2' ).init();
document.dispatchEvent( new Event( 'readystatechange' ) );

Has this changed? I am trying to get an animation to play and this no longer seems to be working.

I take it back, it’s working, but somehow not for an element that’s on a display: none div (which is later shown through code). Any hints on why that might be happening?

Hi Andy!
Could you show me a full example?
I cant catch the event… the “eventState” is always empty.

Sorry, I’ve since moved on to other tasks and can’t return to this right now, but here’s a quick outline:

  1. Create a page with a div
  2. Inside the div, place an img (or other object)
  3. Animate that object (eg: spin continuously, we were trying to do a loading overlay)
  4. Hide the div in webflow
  5. Issue the above code block to reset the animations (eg, on loading some dynamic content)
  6. Set the hidden div’s display to fixed (instead of none)
  7. Note that the animated item is not animating

Andy

Joho, Jaro, did you manage to implement this?

tried a couple of different version of this, but no dice yet…

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

$(document).ajaxComplete(function() {
window.Webflow && window.Webflow.require( 'ix2' ).init();
});

http://ajax-navigation.webflow.io/ here is the playground.

The arrows on the sliders have IX2 animations. Not sure what I’m missing.
Any ideas? @danro @andy_burke

I think you’d want something like this:

$( document ).ajaxComplete( function() {
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require( 'ix2' ).init();
    document.dispatchEvent( new Event( 'readystatechange' ) );
}
1 Like

Hey Andy, thanks for getting back to me here. Super cool!

Just tried this, but still no dice. IX2 won’t restart here after the ajax call. Same same.

Will have a another look tonight.

Hi Chris,

Have you placed a breakpoint to ensure that ajaxComplete is being called?

Is ajaxComplete being called after the DOM has been updated with whatever the result of the ajax call was?