Hey @aesoppang
You will need to use your browser’s dev tools to locate the interaction you want in your site’s js file, usually at the bottom lines of the file. Looks something like this;
{"slug":"interaction-slug-name","name":"interaction-name","value":{"style":{"height":"0px"},"triggers":[{"type":"click","stepsA":[{"height":"0px","transition":"height 300ms ease 0"},{"wait":"50ms"},{"display":"none"}],"stepsB":[{"height":"0px","transition":"height 200ms ease 0"}]}]}},
The only part you will need to call the interaction is the section starting from type to stepsB as follows;
{"type":"click","stepsA":[{"height":"0px","transition":"height 300ms ease 0"},{"wait":"50ms"},{"display":"none"}],"stepsB":[]};
You can then call this interaction in a function (e.g. click) like this;
$(“.your-element-class”).click(function() {
var ix = Webflow.require(‘ix’);
var $target = $(‘.your-element-class’);
var trigger = {“type”:“click”,“stepsA”:[{“height”:“0px”,“transition”:“height 300ms ease 0”},{“wait”:“50ms”},{“display”:“none”}],“stepsB”:};
ix.run(trigger, $target);
return false;
});
@danro has written a very nice explanation on running webflow interactions via code below. Definitely very interesting once you get a working understanding (Interactions 2.0 stuff);