Streaming live at 10am (PST)

How to trigger Webflow interactions using JavaScript


#14

@danro Does this still work the way you described? When I try to run ix.run(trigger, el); it returns undefined.

Also, what does the second argument do exactly? As I understood the trigger object itself contains DOM selectors so why do I need to pass an element into the run method?

Maybe the examples you described are out of date. If that's the case, would you mind updating the instruction :slight_smile:

I'm trying to use the Webflow IX system with a web application, that's why I'd like to trigger interactions from code.

Thanks!


#15

At first don't forget to place the line

var ix = Webflow.require('ix'); above all.

Then I usually take the ix code from the bottom of webflow.js and clean it like this:

var ixItemHover = {
  'stepsA': [{
    'opacity': 0.59,
    'transition': 'transform 200ms ease 0ms, opacity 200ms ease 0ms',
    'scaleX': 0.9,
    'scaleY': 0.9,
    'scaleZ': 1
  }]
};

Then it's possible to fire the ix animation on any DOM node (not jQuery element);

var el = document.querySelector('#hoveredElement');
ix.run(ixItemHover, el);

Easy


#16

So... firing ix.run() doesn't actually run the animation, but it binds it to the element?

Isn't there a way to make the animation run without binding it to DOM element?


#17

For example, I have this trigger object:

{
	"slug": "show-modal",
	"name": "Show Modal",
	"value": {
		"style": {},
		"triggers": [
			{
				"type": "click",
				"selector": ".modal-background",
				"stepsA": [
					{
						"display": "flex"
					},
					{
						"opacity": 1,
						"transition": "opacity 200 ease 0"
					}
				],
				"stepsB": []
			},
			{
				"type": "click",
				"selector": ".modal",
				"preserve3d": true,
				"stepsA": [
					{
						"display": "block"
					},
					{
						"opacity": 1,
						"transition": "opacity 200 ease 0, transform 200 ease 0",
						"x": "0px",
						"y": "0px",
						"z": "0px"
					}
				],
				"stepsB": []
			},
			{
				"type": "click",
				"selector": ".modal-wrap",
				"stepsA": [
					{
						"display": "flex"
					}
				],
				"stepsB": []
			}
		]
	}
}

#18

As far as I understand, the default Webflow's mechanism of animating anyway binds the animation to all the elements, marked with "slug".


#19

@ma11k
Thank you so much! You helped me realize that the animation has to start with 'stepsA' and can't contain 'stepsB' or no animation will happen. For anyone else who needs some help, this is an example of what my code looks like. I had a shrinking menu triggered when users scroll down the page, but if they pressed the back or reload buttons the menu would go back to full size when the page was reloaded and they were halfway down the page. This function shrinks the menu if they're more than 90 pixels scrolled down the page when it loads (that's how tall my invisible scroll trigger at the top is). Hope this helps someone.


// The animation code
var ix = Webflow.require('ix');
var ixAnimation = {
"stepsA":[{
"height":"60px",
"transition":"height 1100ms ease 0"
}]
};
var el = $('.navcontainer');
ix.run(ixAnimation, el);

// The complete function that checks if the page is scrolled & if it is, shrinks the menu
function shrinkMenuIfScrolled() {
if (window.pageYOffset > 90) {
var ix = Webflow.require('ix');
var ixAnimation = {
"stepsA":[{
"height":"60px",
"transition":"height 1100ms ease 0"
}]
};
var el = $('.navcontainer');
ix.run(ixAnimation, el);
}
}
shrinkMenuIfScrolled();


closed #20

opened #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?


#31

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


#32

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!


#33

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