Reinitialize Webflow IX2

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:

  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) {
      resizeTimer = setTimeout(function() {
        //When the page is resized re-start animations
        document.dispatchEvent(new Event('readystatechange'));
      }, 500);

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:
Read link:

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? :sweat_smile:

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 :frowning:

Thanks for any help!

Published link:
Read link:

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

Never mind… :slight_smile: I somehow got it to work the way I want with the native animation settings.

You need a combination of two things:

  1. Add the html attribute “data-wf-page” with your specific id.


  1. retrigger ix2 with the following code:
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require(‘ix2’).init();
    document.dispatchEvent(new Event(‘readystatechange’));

Hi @sebastianjung, thnx for your reply!

Still not triggering any new page interactions :frowning: A working example or if you could take a look would be great.

What i got so far: see my shared project - or the published page On the second page none of the webflow interactions are working.

  • 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.

@socraticus @Harry_B @mastermindesign any luck with this?

I’m sorry if i made false hopes but i am not using barba.js but nuxt.js instead :confused:

Looked at your example but don’t know enough about barba.js’ internals to be of any help i guess.

good luck though =/

Hey Guys,

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.

  sync: true,
  transitions: [{
	async leave(data) {

      const done = this.async();

      await delay(300);
	async enter(data) {
		var Webflow = Webflow || [];
        Webflow.push(function() {
            $('html').attr('data-wf-page', '5e8363a55808c6fd7f381e9b');
            window.Webflow && window.Webflow.destroy();
            window.Webflow && window.Webflow.ready();
            window.Webflow && window.Webflow.require('ix2').init();
            document.dispatchEvent(new Event('readystatechange'));


    async once(data) {

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.

Thanks, Matt

FYI, I moved over to a new thread with this as I’m simply not able to resolve this: Reinitialize Webflow with Custom Code

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!

1 Like

@andy_burke Is there a way to dispatch an event to open the cart wrapper?

Any assistance would be greatly appreciated. Thanks!

Thank you sooooo much, you saved my day!

Hello friends, I see this still hasn’t been answered so here it is:

Webflow.require(‘commerce’) && Webflow.require(‘commerce’).init({siteId: “ENTER-THE-SITE-ID”, apiUrl: “”});

Thank you so much! I love you man!

Hey Danro. Is there any way to do this (re-) init() for a specfific selector only?

Like doing something like Webflow.require(‘ix2’).init(‘.my-cool-card-class’)

I’m Also looking for same thing.
i have imported two webflow snippets. putting on same page initialize only first snippet.
second one does not get initialized.

that’s why i’m looking for way to initialize every snippet individually.

@Prajapati_Rohit So far I haven’t found a suitable solution for the element specific reinitialization of ix2.

But the way I solved it was to search the web to see if there are any good JavaScript libraries for my particular animation.

e.g. For classic tilt card animations this one works wonders → Create Tilt Effect with 1 JavaScript Line | Tilt.js Tutorial - YouTube

Hello everyone. I am having a similar problem and also am not understanding where to put the initialization in my code. Here is my code

window.addEventListener("DOMContentLoaded", (event) => {
  // ajaxmodal component
  function adjaxModal() {
    let lightbox = $("[tr-ajaxmodal-element='lightbox']");
    let lightboxClose = $("[tr-ajaxmodal-element='lightbox-close']").attr("aria-label", "Close Modal");
    let lightboxModal = $("[tr-ajaxmodal-element='lightbox-modal']");
    let cmsLink = "[tr-ajaxmodal-element='cms-link']";
    let cmsPageContent = "[tr-ajaxmodal-element='cms-page-content']";
    let initialPageTitle = document.title;
    let initialPageUrl = window.location.href;
    let focusedLink;

    function updatePageInfo(newTitle, newUrl) {
      document.title = newTitle;
      window.history.replaceState({}, "", newUrl);

    let tl = gsap.timeline({
      paused: true,
      onReverseComplete: () => {
        updatePageInfo(initialPageTitle, initialPageUrl);
      onComplete: () => {
    tl.set("body", { overflow: "hidden" });
    tl.set(lightbox, { display: "flex", onComplete: () => lightboxModal.scrollTop(0) });
    tl.from(lightbox, { opacity: 0, duration: 0.2 });
    tl.from(lightboxModal, { y: "5em", duration: 0.2 }, "<");

    function keepFocusWithinLightbox() {
      let lastFocusableChild = lightbox
        .find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")
      lastFocusableChild.on("focusout", function () {

    function lightboxReady() {
      // your code here

    $(document).on("click", cmsLink, function (e) {
      focusedLink = $(this);
      initialPageUrl = window.location.href;
      let linkUrl = $(this).attr("href");
        url: linkUrl,
        success: function (response) {
          let cmsContent = $(response).find(cmsPageContent);
          let cmsTitle = $(response).filter("title").text();
          let cmsUrl = linkUrl;
          updatePageInfo(cmsTitle, cmsUrl);

    lightboxClose.on("click", function () {
    $(document).on("keydown", function (e) {
      if (e.key === "Escape") tl.reverse();
    $(document).on("click", lightbox, function (e) {
      if (!$("*"))) tl.reverse();

I have a lightbox that wont open when loaded into my ajax modal.

How do I get it to work?

This is my read only link: Webflow - ajteiger