Webflow sync, pageviews & more.
NEW

What are some alternative options for reinitializing Webflow interactions in ix2, similar to the functions Webflow.ready() and Webflow.destroy() in ix1?

TL;DR
  • Use Webflow.require('ix2').init(); after DOM changes to reinitialize all IX2 interactions.
  • Alternatively, update data-wf-page or dispatch events via ix2.store.dispatch(), but these are unofficial and may break.

Webflow Interactions v2 (ix2) does not expose public equivalents to Webflow.ready() and Webflow.destroy() from ix1, but there are some effective alternative strategies for reinitializing ix2 interactions manually.

1. Use the IX2 API Function: Webflow.require('ix2').init()

  • ix2 exposes a limited internal API you can access with Webflow.require('ix2').
  • To reinitialize all interactions, call:
    Webflow.require('ix2').init();
  • This mimics how Webflow runs interactions on initial page load.
  • Use case: Useful after dynamic DOM changes (e.g., content injected via AJAX or using third-party scripts).

2. Use Webflow's Page Loader Trigger (data-wf-page Change)

  • ix2 listens for changes to data-wf-page to detect "page" transitions (especially in Webflow's built-in Page Transitions).
  • Update the value of data-wf-page manually to simulate a page change:
  • Example: document.documentElement.setAttribute('data-wf-page', newPageID);
  • Follow this with Webflow.require('ix2').init(); to reinitiate animations.

3. Re-trigger Specific Interactions via Webflow.require('ix2').store.dispatch()

  • You can manually dispatch interaction events using:
  • Webflow.require('ix2').store.dispatch(...)
  • Use this to trigger specific custom interactions tied to elements, but it requires knowledge of the ix2 Redux-like store schema.
  • Not officially documented and prone to updates, use only if necessary.

4. Alternative: Encapsulate Dynamic Components in Webflow Components

  • For repeatable dynamic units that need reanimation, consider building them as Webflow Components (symbols or reusable components).
  • When injecting or rendering, ensure it's done in a way that respects the structure Webflow expects.

5. Reload Section via AJAX Then Call ix2.init()

  • If injecting new content via AJAX or CMS filtering (e.g., with MixitUp or Jetboost), always follow with:
  • Wait for DOM insertion
  • Then call Webflow.require('ix2').init();
  • This ensures interactions rebind to new elements.

Summary

Because ix2 lacks public Webflow.ready() and Webflow.destroy() equivalents, your main option is to use Webflow.require('ix2').init(); after DOM changes. For more advanced control, dispatch custom interaction events or adjust data-wf-page, but these are unofficial and can break with Webflow updates.

Rate this answer

Other Webflow Questions