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:
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:
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.
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.
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 transitionCompletedevent listener. this way it will reset all webflow interactions after the transition has finished and the old container has been removed from the dom.
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 !
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.
Does anyone know how to reinitialize IX2 with Barba JS? Calling the code @mastermindesign shared inside the transitionCompletedBarba 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
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
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 ;-))