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').destroy() followed by Webflow.require('ix2').init() to reset and reinitialize interactions.
  • Trigger reinitialization after dynamic DOM changes or page navigation events like AJAX loads, avoiding reliance on $(document).ready() or Webflow.ready().

To reinitialize interactions using Webflow’s IX2 (Interactions 2.0) engine, you can use a combination of built-in Webflow methods and custom triggers since IX2 does not expose Webflow.ready() or Webflow.destroy() like IX1 did.

1. Use Webflow.require('ix2').init() to Reinitialize

  • IX2 provides a module-based API, so you can manually trigger it using:
  • Webflow.require('ix2').init()
  • This command reinitializes all IX2 interactions on the current page.
  • Useful when you dynamically inject content using AJAX or JavaScript and need to manually fire interactions again.

2. Use Webflow.require('ix2').destroy() as a Reset

  • If you need to reset the current interactions before reinitializing, use:
  • Webflow.require('ix2').destroy()
  • This clears all running interactions and sets the page to a neutral state.
  • You can follow it with .init() to fully reload interactions:
  • Webflow.require('ix2').destroy(); Webflow.require('ix2').init();

3. Trigger on Page Navigation or History Events

  • For SPA-style navigation (using Webflow’s built-in page linking):
  • Listen to window.Webflow’s DOMContentLoaded or window.onpopstate, then trigger a reinit.
  • This is especially useful if using Barba.js, Swup, or other AJAX-based routing.

4. Reinitialize After Adding DOM Elements

  • If you're dynamically injecting content or replacing a portion of the DOM (e.g., via jQuery or JavaScript):
  • After inserting the new content, run Webflow.require('ix2').init() to bind IX2 interactions to new elements.

5. Avoid Conflicts With jQuery's ready()

  • Do not use the old Webflow.ready() or heavily rely on $(document).ready() for IX2 reinitialization—they don’t impact IX2 interactions anymore.
  • Use the .init() method explicitly instead.

Summary

To reinitialize Webflow interactions in IX2, use Webflow.require('ix2').init() directly. Pair it with Webflow.require('ix2').destroy() if needed to reset state. Unlike IX1’s Webflow.ready() or .destroy(), IX2 requires manual invocation through its public module system.

Rate this answer

Other Webflow Questions