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

Design help Design inspiration
1

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":[]}]}}
]);
2

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

3

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

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

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

5

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.

6

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? - General - Forum | Webflow

Thanks a million.

7

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

8

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

1 Like
9

Hi Bartz, I have another scenario. See here: Oceanic Health Management . 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: http://forum.webflow.com/t/how-to-run-webflow-actions-from-js/3777