Reinitialize Webflow IX2

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.

barba.init({
  sync: true,
  
  transitions: [{
	
	async leave(data) {
      // ON LEAVE DESTROY WEBFLOW ???
	  Webflow.destroy();

      const done = this.async();

	  pageTransition();
      await delay(300);
      done();
	  console.log('leave');
    },
	
	async enter(data) {
        // ON ENTER INITIALIZE WEBFLOW ???
		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'));
        });

        contentAnimation();
	  	console.log('enter');
    },

    async once(data) {
    	contentAnimation();
		console.log('once');
    }
	
  }]
});

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: “https://render.webflow.com”});

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

<script>
// AJAX MODAL POWER-UP
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) {
      lightboxModal.empty();
      document.title = newTitle;
      window.history.replaceState({}, "", newUrl);
    }

    let tl = gsap.timeline({
      paused: true,
      onReverseComplete: () => {
        focusedLink.focus();
        updatePageInfo(initialPageTitle, initialPageUrl);
      },
      onComplete: () => {
        lightboxClose.focus();
      }
    });
    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'])")
        .not(":disabled")
        .not("[aria-hidden=true]")
        .last();
      lastFocusableChild.on("focusout", function () {
        lightboxClose.focus();
      });
    }

    function lightboxReady() {
      // your code here
    }

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

    lightboxClose.on("click", function () {
      tl.reverse();
    });
    $(document).on("keydown", function (e) {
      if (e.key === "Escape") tl.reverse();
    });
    $(document).on("click", lightbox, function (e) {
      if (!$(e.target).is(lightbox.find("*"))) tl.reverse();
    });
  }
  adjaxModal();
});
</script>

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