Streaming live at 10am (PST)

How to trigger Webflow interactions using JavaScript


#21

#22

hello. I’ve found an solution for using jQuery trigger with webflow interactions:

Webflow uses an method to check if the click is valid or not, but only on mobile devices. For some reason, desktop devices always return true.

My solution is to override this method:

$(window).on('load', function(){ 
    Webflow.validClick = function(){return true}
});

This make the method always return true, in any device, allowing start an interaction using $('element').trigger('click').

This method Isn’t perfect and an update may break it…


#23

@danro Is this method still applicable in 2018? I’m not seeing trigger objects like that in webflow.js

I think I found the event I’m trying to trigger (using $(element).click() ) but I’m not actually sure how to trigger it. Here’s what I found:

"e-250":{"id":"e-250","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","config":{"delay":0,"easing":"","duration":0,"actionListId":"a-102","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-251"}},"mediaQueries":["main","medium","small","tiny"],"target":{"appliesTo":"ELEMENT","styleBlockIds":[],"id":"5b05aeb50a09289cd3d35e1f|9f812f67-674e-f68d-6437-31a7c427dcdf"},"config":{"loop":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1527120557233}


#24

Is this method still working for you @maxviewup with IX2.0?


#25

Whoa. This is great! Thanks for the simple but clear explanation. Webflow keeps getting better!


#26

@sprockethouse Were you able to get this working?


#27

I’m so confused. The original posts are from 2014 and as far as I can tell, are only relevant for “IX1”. I can’t find any information on changing, overriding, or adding custom interactions using the IX systems other than this and another post. Furthermore, the example doesn’t work without including the IX1 engine linked in Danro’s jsbin example.
After exporting my site, I’ve found that all the interactions use the IX2 format, of which there is even less documentation or mention.

@khaag see this post as a possible reason why it’s not working for you.
@danro help pls?? Mostly just looking for clarification and resources.

Specifically, I’m trying to disable the animation of the mobile navigation menu and create the animation with CSS. As this is built in and not abstracted like the custom interactions at the bottom of Webflow.js, I’m having more trouble trying to figure out how to modify this without ripping out the entire wf native navigation element and redoing from scratch.


#28

Hi @timtorres, regarding the navbar widget, we do not yet support extending the open/close animation with custom CSS animation or custom code of any kind.

However, I would suggest giving IX2 a try since we do have events built in to handle Navbar open/close.


#29

Hi @timtorres

Simple interactions (hide/show menu) I prefer to do in CSS+JS.

In Webflow I define:

.menu {
/* menu style, 
    hidden by default (moved away from the screen 
    or with opacity:0 
    with transitions set) */
}

.menu.shown {
/* overrides the hidden state */
}

↑ this is done in Webflow.

Then in JS I write a simple script which sets listeners to the triggers.
It just adds/removes the sub-class “shown” from the menu, all the animation occurs via CSS-transitions.

Since it’s CSS that moves things, then we have all the power of tweaking different interactions (or turnung them off) for different screen sizes.


#30

Anyone know how to use javascript to detect when an interaction is triggered?