Streaming live at 10am (PST)

Is there any way to trigger IX2 from custom code?


#1

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.


#2

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


#3

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:


#4

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


#5

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.


#6

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:


#7

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.


#8

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()


#9

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