Streaming live at 10am (PST)

Does webflow interactions work if exported to a bootstrap-studio project?

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.


Here is my public share link: LINK
(how to access public share link)

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

For my case, I needed to add:

$('body').attr('data-w-id', '4ed49ac7-9cc4-d229-06dd-6db91a77663c')

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.

Hope this helps someone else.