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 ;-))
in the Head Code inside the dashboard: i load the barba.js code which works.
in the Footer Code i first initiate the barba transition code
after that in the same Footer Code i try to run the reinitialize script with the data-wf-page id. But i’m unclear if this is the right order, or if this should be initiated inside the transition script or inside the barbara function.
Now I’m on this task too that most of you guys don’t seem to have solved yet. I’m using barbajs v2 and I’m trying to make normal interactions of webflow work again after the page transition is done.
However so far no luck. I don’t know how I could possibly make the normal interactions work with this. E.g. in my case I have a scroll animation on a page I’m navigating to. If I reload the page normally in the browser all interactions work, however if I navigate with a link click and barba events take over the interactions never re-initialize and fire.
I guess a lot of users would be really eager to find a working solution for this as this is not only important with barba but also other libraries.
I realise I’m years late to the party here, but wanted to say thank you for your comment here. Hooking into the store and dispatching an action with a new state was the only way I have been able to properly reinitialise a Webflow animation. Thanks!