Triggering IX2 interactions using Javascript

Hi, I’m trying to trigger a sound based on an element’s visibility. I have already achieved it by controlling directly the hide/show visibility manually in the designer, but when visibility is triggered through WF interactions, I understand it’s quite different.

I’ve asked Chat GPT and it came up with that:

   // Webflow interaction event listener for .tableau-001 visibility
  document.addEventListener('wf-change', function (event) {
    // Check if the interaction involves changing .tableau-001 visibility
    if (event.detail.elems && event.detail.elems.includes('.tableau-001')) {
      const tableauElement = document.querySelector('.tableau-001');

      // Check if .tableau-001 is visible
      if (tableauElement.classList.contains('w-condition-invisible')) {
        redrumSound.pause();
      } else {
        redrumSound.play();
      }
    }
  });

This doesn’t work, but it doesn’t return any error either. Would someone know if ChatGPT has maybe only mistaken the proper eventListener for IX2?

p.s.: I’m obviously not a coder; please forgive me if I’m drifting from good practices.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

There isn’t a direct way to trigger custom code from an interaction.
You can do it indirectly by setting up a mutationobserver in JS which watches those elements, and detects the change. It takes some configuration work and good DOM inspection to get this right.

Another possibility might be to avoid IX2 for this piece, and to use GSAP, which is JS-controlled interactions. Since you’ll control the triggering code directly, you’ll be able to add things like “play sound” to it.

1 Like

@memetican : I could fix my problem the other way around, so let me ask your another question:

Is it possible to programmatically trigger Webflow interactions? The goal being to have a single button randomizing a set of different animations (from Webflow’s Interactions panel) at every second click.

I guess it comes down to how Webflow identifies/bind its key frame interactions, and then triggering it using a custom button with some .js

Huge thanks!

@memetican I see you already answered a question about that. Are those still the most current solutions?

I might just hire a Webflow Expert to help me with the code. I just want to be sure I can spend some time working on the said interactions within Webflow, so we can then bind them afterward to some random script / click event.

Thanks!

Probably- the basic solution is to make a hidden button the trigger for each interaction, and then click the button you want to trigger that interaction.

For more complex solutions like CMS-driven map pin popups or glossary definition modals, I build layers on top of that to solidify the admin and designer work.

Drop me a message if you need some work done- I’m away for a week from Friday however, so may be slower to respond.

1 Like