Streaming live at 10am (PST)

Reinitialize Webflow IX2


#21

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


#22

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


#23

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

#24

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.


#25

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?


#26

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:

  <script>
$( 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' ) );
}
  </script>

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:


#27

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.

Andy


#28

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.

jaro