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();to reapply Webflow interactions after dynamically updating or injecting content. - Optionally call
Webflow.require('ix2').destroy();beforeinit()when replacing or removing elements to clean up interactions.
In Webflow IX2 (Interactions 2.0), the legacy Webflow.ready() and Webflow.destroy() methods from IX1 are no longer supported, but there are alternative patterns for reinitializing interactions when content is dynamically added or updated.
1. Use Webflow.require('ix2').init() to Reinitialize IX2 Interactions
- Webflow exposes a public-facing module system where
Webflow.require('ix2')allows access to Interaction 2 methods. - You can re-trigger IX2 by calling:
Webflow.require('ix2').init();
- This is useful when you dynamically add DOM elements that need to have Webflow interactions re-applied.
2. Use Webflow.require('ix2').destroy() if Needed (Advanced)
- If you're replacing content or removing elements, you can optionally use:
Webflow.require('ix2').destroy();
to clean up IX2 before reinitializing things.
- Then follow it with
init()to re-bind interactions: Webflow.require('ix2').init();
3. Trigger After AJAX, CMS Filtering, or DOM Updates
- After injecting new content (e.g., using Finsweet’s CMS Filter or Load), run the
init()function to apply interactions to new elements. - Example:
After your content loads:
Webflow.require('ix2').init();
4. Mount Interactions on Page Change (SPAs or PJAX)
- If you're using a system like Barba.js for smooth transitions, Webflow IX2 won’t auto-rebind interactions on page updates.
- In your view transition callback, always call:
Webflow.require('ix2').init();
5. Caution: Unsupported APIs May Change
- These are not officially documented by Webflow, so future updates may change their behavior.
- Use cautiously and test when updating Webflow projects.
Summary
To reinitialize IX2 interactions, use Webflow.require('ix2').init();. If needed, use .destroy() beforehand. This pattern is essential when dynamically injecting or updating DOM content that depends on Webflow interactions.