Good day,
i have been searching the entire web for some days looking for a solution to this : if i export webflow code and go to bootstrap studio, import css, javascript and add the same classes to the HTML elements, the interactions/animations do not work. The elements get all the css properties, but not the animations. I saw that maybe I would need to insert “window.Webflow.require(‘ix2’).init()” but that did not work.
Also, I double-check the js and CSS imports, and they are all the same as the HTML exported from webflow.
So, my question is this. It is possible to use bootstrap-studio with webflow?
OBS: I know that I did not need to use the bootstrap studio at all. But I got a client that wanted the project in there and he refuses to even listen about working with another platform.
So, I probably find a solution to this, and I’ll share it here.
This actually may count for other services like WordPress, Vue, etc
The ‘main’ solution, I found here:
But it does not solve my problem entirely. I needed to add more things.
Main Solution:
var Webflow = Webflow || [];
Webflow.push(function() {
// IX 2 Fix for loading animations when the site loads
$('html').attr('data-wf-page', '60160707a2b63e0b44131c8f');
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);
});
});
So in general for body and HTML, you will need to do this always, if the exported code has it.
Also, if an element, that performs an interaction/animation, has this ‘data-w-id’, you will need to add the corresponding code to it.
Because of that, is preferable to create the animation related to classes and not to element id.