Reinitialize Webflow IX2

Design help Animations & Interactions
1

hey people. :sun_with_face:

for ix1 there has been an option to reinitialize webflow which was absolutely needed to build single page websites and make webflow’s interactions work. the functions were Webflow.ready(); and Webflow.destroy();.

is anyone aware of something similar that works for ix2? because the functions above don’t.

@danro @samliew @CallMeChris

that would be super amazing!
thank you.

2 Likes
2

Hey Jaro,
unfortunately I don’t have a clue myself.

But that would be very handy to know for sure!

Gonna bump this again to @danro… Any ideas?

Cheers

3

Reinitialize?? A little confused on what you’re trying to do?

4

for me i am building a single page website with the use of barba.js but there are other possible scenarios. see here:

5

No dice, yet?

Gotta bump this up then.

1 Like
6

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

7

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/

8

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.

9

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

Any word on this?

10

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
11

@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
12

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

13

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?

14

This seems to have done it for me:

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

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
16

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?

17

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' ) );
1 Like
18

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

19

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?

20

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