Streaming live at 10am (PST)

Reinitialize Webflow IX2


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



Joho, Jaro, did you manage to implement this?

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

   $(document).ajaxSend(function() {

$(document).ajaxComplete(function() {
window.Webflow && window.Webflow.require( 'ix2' ).init();
}); 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' ) );


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?


Hey, Andy, sry for my late reply. I have a feeling this is above my limited coding skills. haha

I’m familiar with css breakpoints, but pretty sure this is not what you mean here.

I basically have little this piece of code here, and in the past the AJAX complete function successfully triggered all kinds of non-webflow interactions( GSAP)

    // in page loading of sub sites: for NAVBAR // 

$(document).ready(function() {                                  // DOM has loaded
  function loadContent(url){                    // Load new content into page
    $('.content').load(url + ' .container').hide().fadeIn();

  $('.w-nav-menu a, .w-nav-brand').on('click', function(e) {          // Click handler 
    e.preventDefault();                         // Stop link loading new page
    var href = this.href;                       // Get href attribute of link
    var $this = $(this);                        // Store link in jQuery object
    $('.w-nav-menu a, .w-nav-brand').removeClass('w--current');              // Remove current from links
    $this.addClass('w--current');                  // Update current link
    setTimeout(loadContent, 300, href);                          // Call function: loads content
    history.pushState('', $this.text, href);    // Update history

  window.onpopstate = function() {              // Handle back/forward buttons
    var path = location.pathname;               // Get file path
    loadContent(path);                          // Call function to load page
    var page = path.substring(location.pathname.lastIndexOf('/')+1);
    $('.w-nav-menu a, .w-nav-brand').removeClass('w--current');              // Remove current from links
    $('[href="' + page + '"]').addClass('w--current'); // Update current link
}); //

and now I basically added the code you gave me above as script in the body of the page to restart the IX2 engine, 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' ) );

That might actually be completely retarded. If there is something very obvious missing, let me know.
If not, I’ll just have to hire someone when it the matter becomes more pressing :smiley:


I haven’t used jQuery in quite a while, but skimming the docs it seems like that should be working.

One thing you might need to do to ensure proper animations are being triggered/played is to set the wf-page property on the html. In your system it might look like:

function loadContent( url ) {
    $( '.content' ).load( url + ' .container', function() {
        var page_id = $( '.content' ).data( 'wf-page' );
        $( 'html' ).data( 'wf-page', page_id );
    } ).hide().fadeIn();

This adds a callback once the load is completed that tries to set data-wf-page on the html element. I think the animation system may rely on that being set properly.

But overall, dealing with the webflow animation system from code, loading new pages dynamically, etc. is non-trivial and tough if you’re not pretty experienced with frontend dev.



hey @danro.

i was finally able to play with the new reinit function for ix2. it works like a charm. there is just one thing i am experiencing and its quite hard to notice.

using the new while scrolling interaction, it seems like the global smoothing option is not being initialized again after calling the function. instead it switches to the default value which is 0%. could you please check that? i tried it with different settings but its not working. so, might be something on your end. thank you so much!

fyi: because i am using ix2 only, i just call Webflow.require('ix2').init(). nothing else.



Hey @buntestrahlen Quick question.

Where in the code are you placing Webflow.require('ix2').init()? I’m using barba.js too

Thanks! :slightly_smiling_face:


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]) {



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 !


coming in december/january hopefully!


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!