Streaming live at 10am (PST)

WF Export with IX for custom development. Is it Useful?

I want some shared experiences on how WF designers/developers are using the IX exports with custom development or dynamic contents. I have been finding it challenging using it for web applications. Other components/widgets can be easily ported, but I can’t find where I can start from with interactions. I have a small experiment I am doing with slide interactions and would like to know how I can create additional slides dynamically using existing WF codebase, like other widgets do. I have checked the web flow.js file and I saw the IX codes like this (Can anyone make sense of this?):

 * ----------------------------------------------------------------------
 * Webflow: Interactions: Init
 */
Webflow.require('ix').init([
  {"slug":"intro-animation","name":"Intro animation","value":{"style":{},"triggers":[{"type":"load","selector":".imgarrow-img","loopA":true,"stepsA":[{"opacity":1,"transition":"transform 1000ms ease-in-out 0ms, opacity 1000ms ease-in-out-expo 0ms","x":"10px","y":"0px"},{"opacity":1,"transition":"transform 1000ms ease-in-out 0ms, opacity 1000ms ease-in-out-expo 0ms","x":"4%","y":"0px"}],"stepsB":[]},{"type":"click","selector":".container","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"-100%","y":"0px"}],"stepsB":[]},{"type":"click","selector":".merchant-navbar","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"0px","y":"0px"}],"stepsB":[]},{"type":"click","selector":".allproduct-screenlink","stepsA":[{"display":"block","opacity":1,"transition":"opacity 500ms ease 0ms"}],"stepsB":[]}]}},
  {"slug":"accessname-logo-intro","name":"Accessname Logo Intro","value":{"style":{},"triggers":[{"type":"load","selector":".accessimage-img","stepsA":[{"opacity":1,"transition":"transform 1000ms ease-in-out-expo 0ms, opacity 1000ms ease-in-out-expo 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"back-to-catalog","name":"Back to catalog","value":{"style":{"display":"none"},"triggers":[{"type":"click","selector":".container","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"-100%","y":"0px"}],"stepsB":[]},{"type":"click","stepsA":[{"display":"none"}],"stepsB":[]}]}},
  {"slug":"catalog-zoom-animation","name":"catalog zoom animation","value":{"style":{},"triggers":[{"type":"load","selector":".imagezoom-block","loopA":true,"stepsA":[{"transition":"transform 5000ms ease 0ms","scale":1.05},{"wait":2000},{"transition":"transform 5000ms ease 0ms","scale":1},{"wait":2000},{"transition":"transform 5000ms ease 0ms","scale":1.05},{"wait":2000}],"stepsB":[]}]}},
  {"slug":"container-nutritional","name":"Container Nutritional","value":{"style":{},"triggers":[{"type":"click","selector":".container","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"-200%","y":"0px"}],"stepsB":[]},{"type":"click","selector":".screen-link","stepsA":[{"display":"block","opacity":1,"transition":"opacity 500ms ease 0ms"}],"stepsB":[]}]}},
  {"slug":"product-container-personal-care","name":"Product Container Personal Care","value":{"style":{},"triggers":[{"type":"click","selector":".container","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"-300%","y":"0px","group":"A","trigger":{"modelType":"MacroTrigger","macro":{"modelType":"Macro","guid":"752ca67a-5519-1f9d-b392-f82d40c3e62d","style":{"modelType":"MacroStyle"}}}}],"stepsB":[],"macro":{"modelType":"Macro","guid":"752ca67a-5519-1f9d-b392-f82d40c3e62d","style":{"modelType":"MacroStyle"}}},{"type":"click","selector":".screen-link","stepsA":[{"display":"block","opacity":1,"transition":"opacity 1000ms ease-in-out-expo 0ms","group":"A","trigger":{"modelType":"MacroTrigger","macro":{"modelType":"Macro","guid":"752ca67a-5519-1f9d-b392-f82d40c3e62d","style":{"modelType":"MacroStyle"}}}}],"stepsB":[],"macro":{"modelType":"Macro","guid":"752ca67a-5519-1f9d-b392-f82d40c3e62d","style":{"modelType":"MacroStyle"}}}]}},
  {"slug":"product-container-home-care","name":"Product Container Home Care","value":{"style":{},"triggers":[{"type":"click","selector":".container","stepsA":[{"transition":"transform 1000ms ease-in-out-expo 0ms","x":"-400%","y":"0px"}],"stepsB":[]},{"type":"click","selector":".screen-link","stepsA":[{"display":"block","opacity":1,"transition":"opacity 1000ms ease-in-out-expo 0ms"}],"stepsB":[]}]}}
]);

To create a dynamic slider simply populate the DIV object with a webflow slider html code. You can then populate the slides with some kind of for(...) {...} function to read through the list of images links inside an array. It’s very simple ;)

Hey Bartekkustra, longest time, How are you? You assisted me a long time ago using WF Slider, which was great. But I want to achieve more using IX instead of the WF Slider widget. The problem with WF Slider is with mobile. On mobile (Tablet & Phone), there is no way to disable swipe which is the most annoying user experience if I should go via the WF Slider widget.

Do you have any idea of how one can disable WF slider swipe event? Thanks

$('.w-slider').click(function(e) {
	e.preventDefault();
});

Try this one in your footer code inside <script></script> tags :)

Oh and I’m great :) Thank you! Hopefuly my help was useful that time :D A lot of things, good things happen to me lately so I’m smiling from ear to ear! Catch me on Skype if you’d like to talk some time :) Details are in my profile.

Ok Barteskustra, will try it out. Thats great to know. Sure, we get in touch via Skype. Also got some leads too via this post Disable dragging for sliders?

Thanks a million.

Did that solution that @danro posted worked for you? The one with $('.w-slider').off('swipe')?

Yeah. Bartz it worked. Appreciate your contribution too. Always there to help others. Good heart. Thanks.

1 Like

Hi Bartz, I have another scenario. See here: http://oceanichealthng.com/mgt-test . Is there a way to use webflow.js to achieve it instead of creating it within Webflow, so that can I use it with dynamic data. Right now it is not working for me, not as straight forward as other widget codes after export. I saw code:

var ix = Webflow.require('ix');
var $el = ('.your-selector-here');

var trigger = {"type":"load","stepsA":[{"wait":200},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]};

ix.run(trigger, $el);

You can read about it here: How to trigger Webflow interactions using JavaScript