Sorry, I’ve since moved on to other tasks and can’t return to this right now, but here’s a quick outline:
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' ) );
}
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:
<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 
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
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
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();
});
Do you have may be sample demo page to share with rest of group 
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!
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>
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? 
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 
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… I somehow got it to work the way I want with the native animation settings.
You need a combination of two things:
Example:
