Assign existing IX2 Events to cloned Objects via custom JS Code

Design help Custom code
1

Hey,

So what am I trying to do?

I’m trying to create template objects in Webflow like e.g. project cards with hover animations and other fun stuff for varoius pages. Then I want to hide these template Objects, use custom code to retrieve the real project data from my data source and use this data to clone the template objects and fill them with this data. This works fine up to the point where I want to use all sorts of actions like ‘onClick’, ‘onHover/mouseOver’ and so on. They work fine on the sample object, but since there is NO way to clone an object with JS and keep the events I’m now wondering: Is there ANY way, to call the already setup events I have in my template object once I’ve created copies of it via custom code?

I’ve been reading through a lot of older threads which always lead me to the point where IX(1) is used and everyone says its not working with IX2 anymore. See this example: https://discourse.webflow.com/t/how-to-trigger-webflow-interactions-using-javascript/3777

Where with IX1 we were able to copy the triggers from the last line in the webflow.js and use them in custom code like this:

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

But all I find is now: You can’t use ix.run() with IX2 anymore and if I look at the webflow.js at e.g. the hover events they now look like this (so no more triggers or stepsA and so on):

"a-35": {
        "id": "a-35",
        "title": "project-tile-hover",
        "actionItemGroups": [{
            "actionItems": [{
                    "id": "a-35-n",
                    "actionTypeId": "GENERAL_DISPLAY",
                    "config": {
                        "delay": 0,
                        "easing": "",
                        "duration": 0,
                        "target": {
                            "useEventTarget": "CHILDREN",
                            "selector": ".project-on-hover",
                            "selectorGuids": ["39e62a30-9966-510a-7590-e79bbc569190"]
                        },
                        "value": "none"
                    }
                }

Did anyone manage to get stuff like this working?

I guess this would be quite useful so you could use Webflow as designer for the layout, animations and so on but still use your external data source as it is to then combine both via custom code.

I appriciate your Help a lot!

2

Okay so apparently I solved this problem:

if you create template objects in Webflow and clone them via JS you need to add the following lines in your JS code after adding the cloned objects to your site:

Webflow.destroy();
Webflow.ready();
Webflow.require('ix2').init();

Because: By reinitializing the ix2 module it scans the page for all elements and their classes(?!) and adds the needed eventhandlers to them.