Trigger Webflow interaction in custom code

[Grant]

Does anybody know of a way to do this?

[cyberdave (Dave S.)]

Hi @Grant, at the moment, triggering Webflow interactions using custom code is not supported.

I hope this helps !

Regards,
Dave

[Grant]

Thanks for the answer, @cyberdave! Can I ask you to think with me a little further on this?

As a work-around, I have an element that triggers some animations on click. Instead of triggering the animations with custom code directly, I’m triggering a click on that element in the custom code, like so:

$('.who-are-we-button-3').click( function() {
        setTimeout( function() {
            $('#faux-trigger-1').click();
        }, 500);
    });

I’m planning on having #faux-trigger-1 hidden on the live version, so this will only be behind the scenes.

I know this sounds like a stupid thing to do, but here’s why I’m doing it: I’m going to have a series of 30+ animations that are going to require a lot of fine timing tweaks. Say we build the whole thing out, and then decide that the first animation needs to be 50ms longer. If we just use the Webflow interface like normal, we’ll have to adjust each and every one of the subsequent interactions to wait another 50ms.

However, if I can do it this way, I can group them under a few “faux triggers” and just tweak the milliseconds on the setTimeout functions, which will save lots of time.

It works on desktop. The problem I’m having is that it doesn’t work on mobile (android Chrome or iOS Safari). The Webflow event is not triggering when I “click” its trigger DOM element in the custom code.

If I add an alert to the “faux trigger” like below, the alert works properly, but the Webflow interaction still doesn’t fire.

$('#faux-trigger-1').click( function() {
    alert('faux trigger \"clicked\"');
});

Do you have any idea why the Webflow animation isn’t firing on mobile?

Many thanks!
Grant

[Grant]

I think I’ve found a way to make this work.

I made the faux event hover-triggered and triggered the hover like so:

$(document).ready( function() {
    $('.element-1').click( function() {
        setTimeout( function() {
            $('.element-2').trigger('mouseenter');
        }, 2000);
    });
});

I haven’t yet tried to use this to build something complex, but with a simple demo it works in Chrome, Safari, IE10, Android Chrome, and iOS Safari.