Streaming live at 10am (PST)

How to trigger Webflow interactions using JavaScript

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…

@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}

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

1 Like

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

@sprockethouse Were you able to get this working?

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.

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.

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.

1 Like

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

1 Like

Hi, danro, would it be possible to show the steps to work with IX2 using JS/JQuery? I noticed that the run() function, which was used in IX is not available in IX2. In the Webflow.js I see you initialize the events, the transitions, etc, how do you access them using JQuery on DOM Elements. Thank you

1 Like

It appears that native jQuery click events now trigger IX2 animations without any special code?? At least that’s what I’m seeing!

If so, hoorah!

Was able to trigger an ix2 animation by actually simulating the trigger action - using this simple “simulate” function: https://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript

Honestly, I don’t think I’d waste any more time trying to reverse engineer Webflow’s code. It sucks. I’ve resorted to attaching animations to clicks on hidden buttons & then using javascript to click those buttons when I need the animation to run. It’s super simple and easy.

document.getElementById('hidden-animation-trigger-button-id-goes-here').click();
4 Likes

I solved how to run SCROLL animations in WEBFLOWE if you use FULLPAGE.JS. To scroll ANCHOR, after refreshing for each ANCHOR, refresh the scroll position as follows: (run triggers scroll)

$(document).ready(function () {
	$('#fullpage').fullpage({
		anchors: ['01', '02', '03', '04', '05'],
		animateAnchor: true,
		easing: 'easeInOutCubic',
		scrollingSpeed: 600,
		scrollOverflow: true,
		scrollOverflowReset: true,
		//
		afterLoad: function (origin, destination, direction) {
			var loadedSection = this;
			//refresh scroll position
			if (origin.anchor == '01') {
				$.fn.fullpage.setAutoScrolling(false);
				$.fn.fullpage.setAutoScrolling(true);
			}
			if (origin.anchor == '02') {
				$.fn.fullpage.setAutoScrolling(false);
				$.fn.fullpage.setAutoScrolling(true);
			}
			if (origin.anchor == '03') {
				$.fn.fullpage.setAutoScrolling(false);
				$.fn.fullpage.setAutoScrolling(true);
			}
			if (origin.anchor == '04') {
				$.fn.fullpage.setAutoScrolling(false);
				$.fn.fullpage.setAutoScrolling(true);
			}
			if (origin.anchor == '05') {
				$.fn.fullpage.setAutoScrolling(false);
				$.fn.fullpage.setAutoScrolling(true);
			}
		}
	});
});
2 Likes

can you please share the code with us

Ahoy! I’m building an ordering-site for a bagel shop, and need customers to be able to add multiple servings to an order. You can check out a testsite here: https://formtestsite.webflow.io/

I start the menucard out collapsed, and use IX2 trigger-events and animations to fire the expansion of the various menu items. Works wonderful on the first elements where the trigger is actually targeted.

When the Window is loaded, I prepare a clone of the div that contains all the menu-elements with cloneNode([true]).

This allows me to dynamically inject another serving if the customer adds one with .insertBefore.

The cloning works neatly, but the IX2 triggers don’t work on the cloned elements.

I’m wondering if there’s a way for me to tie the triggers to the cloned elements??

I confirm this works.

Thank you. That’s exactly what I needed for it to work on mobile.
For everyone seeing this post in the future, just bind the animation for “Click” events.
Then use JQuery (or plain JS) to invoke click event and animation will simply start.
See t_whitt14 comment.

1 Like

Found this trick, works for me. In short: create an invisible button, find it with JS, send .click() Javascript function call after interaction is done