Need help Triggering event with Webflow IX Code

Design help Custom code
1

So I just recently found out you can trigger Interactions manually with with javascript code.

But i’m having some trouble here.

My main goal is to get interaction triggered by swipe using the Touchwipe jQuery plugin.

My code is here:

<script>
var ix = Webflow.require('ix');
var $el = $('body,html');

var trigger = {"type":"click","selector":".nav-mobile","preserve3d":true,"stepsA":[{"transition":"transform 250ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]},{"type":"click","selector":".navline1","preserve3d":true,"stepsA":[{"width":"12px","transition":"transform 100ms ease 0, width 200 ease 0","x":"-2px","y":"1px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"-45deg"}],"stepsB":[]},{"type":"click","selector":".navline3","preserve3d":true,"stepsA":[{"width":"12px","transition":"transform 200 ease 0, width 200 ease 0","x":"-2px","y":"-1px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"45deg"}],"stepsB":[]},{"type":"click","selector":".screen-overlay","stepsA":[{"display":"block"},{"opacity":1,"transition":"opacity 200 ease 0"}],"stepsB":[]}


  $('body,html').touchwipe({
     
     wipeRight: function() { ix.run(trigger, $el); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});
  </script>
  <script>
var ix = Webflow.require('ix');
var $et = $('body,html');

var trigger = {"type":"click","selector":".nav-mobile","preserve3d":true,"stepsA":[{"transition":"transform 250ms ease 0","x":"-75.5vw","y":"0px","z":"0px"}],"stepsB":[]},{"type":"click","selector":".screen-overlay","stepsA":[{"opacity":0,"transition":"opacity 200 ease 0"},{"display":"none"}],"stepsB":[]},{"type":"click","selector":".navline1","preserve3d":true,"stepsA":[{"width":"17px","transition":"transform 200 ease 0, width 200 ease 0","x":"0px","y":"0px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}],"stepsB":[]},{"type":"click","selector":".navline3","preserve3d":true,"stepsA":[{"width":"17px","transition":"transform 200 ease 0, width 200 ease 0","x":"0px","y":"0px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}],"stepsB":[]}


  $('body,html').touchwipe({
     wipeLeft: function() { ix.run(trigger, $et); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});
  </script>

Is there anything I’m doing wrong?

2

Updated Code

<script>
var ix = Webflow.require('ix');
var $el = $('body,html');

var trigger = {"slug":"open-menu","name":"Open Menu","value":{"style":{},"triggers":[{"type":"click","selector":".nav-mobile","preserve3d":true,"stepsA":[{"transition":"transform 250ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]},{"type":"click","selector":".navline1","preserve3d":true,"stepsA":[{"width":"12px","transition":"transform 100ms ease 0, width 200 ease 0","x":"-2px","y":"1px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"-45deg"}],"stepsB":[]},{"type":"click","selector":".navline3","preserve3d":true,"stepsA":[{"width":"12px","transition":"transform 200 ease 0, width 200 ease 0","x":"-2px","y":"-1px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"45deg"}],"stepsB":[]},{"type":"click","selector":".screen-overlay","stepsA":[{"display":"block"},{"opacity":1,"transition":"opacity 200 ease 0"}],"stepsB":[]}]}}


  $('body,html').touchwipe({
     
     wipeRight: function() { ix.run(trigger, $el); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});
  </script>
  <script>
var ix = Webflow.require('ix');
var $et = $('body,html');

var trigger = {"slug":"close-menu","name":"Close Menu","value":{"style":{},"triggers":[{"type":"click","selector":".nav-mobile","preserve3d":true,"stepsA":[{"transition":"transform 250ms ease 0","x":"-75.5vw","y":"0px","z":"0px"}],"stepsB":[]},{"type":"click","selector":".screen-overlay","stepsA":[{"opacity":0,"transition":"opacity 200 ease 0"},{"display":"none"}],"stepsB":[]},{"type":"click","selector":".navline1","preserve3d":true,"stepsA":[{"width":"17px","transition":"transform 200 ease 0, width 200 ease 0","x":"0px","y":"0px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}],"stepsB":[]},{"type":"click","selector":".navline3","preserve3d":true,"stepsA":[{"width":"17px","transition":"transform 200 ease 0, width 200 ease 0","x":"0px","y":"0px","z":"0px","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}],"stepsB":[]}]}}


  $('body,html').touchwipe({
     wipeLeft: function() { ix.run(trigger, $et); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});
  </script>
3

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!