Is there any way to trigger IX2 from custom code?

Hi JS ninjas,
before embarking into this venture, can anyone tell me if there’s the possibility of triggering IX2 with custom code? If so, would you mind sharing your experience and how have you done it?

Thank you very much in advance.

Yes, please, there was a very good explanation on how to do this with IX, but the method has changed in IX2. Could someone from the Webflow team post the steps required, or a guide on this? Thank you

2 Likes

Hey @mrmtta

You might try to reverse engineer this. Depending if there is a particular trigger you require, you could set up the interaction in your Designer and export the code to see how it’s written.

All exports include super clean HTML, CSS and JS.

You could then use the portions you need this way perhaps?

Hope this helps! :grinning:

1 Like

Hi @magicmark, that’s a great point. I will do it and share the conclusions here.

I’ve tried to do what @magicmark said with no success. I’m not a JS expert and it is really hard for me to understand what’s going on the code.

What I did is creating a simple click interaction in Webflow, export the code, copy the last part where interactions are taking place, paste it as custom code in the footer of the page and remove the interaction from the Webflow project. I also assigned the data-w-id custom attribute to the div that is supposed to trigger the interaction.

Here is the code added to the footer of my page.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
Webflow.require('ix2').init({
/* interactions code pasted here */
});
});
</script>

Project preview link:
https://preview.webflow.com/preview/interaction-custom?utm_source=interaction-custom&preview=339eaa981d9623857599ec2b4f65a8c5

I don’t know if I’m doing things correctly or if I’m missing something.

Would be great if anyone with a bit more idea could tell us if it is possible to trigger Webflow interaction from custom code.

Thanks in advance.

1 Like

Hi @mrmtta

Do you mind if I ask why you need to use code to trigger IX2.0 interactions in the first place?

The only reason I say that is because Webflow is designed so you don’t have to know code for these things as long as you understand the CSS HTML structure. You can create the entire site as you need and even export it elsewhere if you need to. I’ve been able to develop fairly complex sites with world class hosting without needing to know a line of code :smiley: :exploding_head:

If you say your reason for needing this, then there may be other solutions or ideas that me or other people can suggest for you.

I’m not too familiar with code either, although I’m learning, but it’s a mix of all the code that makes things work. JS will depend on CSS and HTML all working together so I’m not sure it will be as straight forward as just pasting in some Javascript. :grimacing:

Some examples I would like to accomplish are:

  • staggered animations.
  • add variables to the properties being animated, making them dependable on element height for example.
  • change the value of the position property while animating, for example from relative to fixed.

And also sometime it feels too manual when it comes to creating more complex animation that from code would be much easier to manage and update. Maybe a timeline like the one used in After Effects or any other animation platform could help to make animations management more easy.

There’s a dirty hack that is actually very effective:

  1. Within the Webflow designer, make any element (a div works fine), then set its display style to “none”.
  2. Give the element an ID within the Webflow menu (eg animationTrigger).
  3. Create your animation, then make its trigger a click on your hidden div.
  4. Within your code, when you want to trigger the animation, just imitate a click on your hidden div:

document.getElementById('animationTrigger').click()

10 Likes

Thank you very much @jasondark, I think that can be pretty helpful for some occasions.

Wow this is so simple and so smart :smiley:
This could have saved a few hours last night :joy:

Can this work to trigger an interaction from one page to another. In other words, if I click a button on my home page, it opens another page and triggers an interaction to happen?

Sure if the interaction on the other page was on page load. The web is stateless unless you code it .

The interaction is not active on page load. Is there a way to activate it without it being a “on page load” interaction? Or is there a way to make a “on page load” interaction that only triggers when the button on the hope page is clicked but it’s not triggered when visiting the page normally? I hope that makes since.

The code it part is where this could happen. A button is clicked, a value in local storage is set, a new page is loaded, the variable is checked , if set a click event could trigger an animation bound to it. No I won’t code this for free.

Ok, I didn’t fully understand what you said but I’m assuming you basically said yes it is possible. How much would it be to get this custom code made? If it works, I plan on using it in several other places. Would it be code I could reuse?

Thanks

PM Sent regarding cost / implementation details.