Streaming live at 10am (PST)

How to trigger Webflow interactions using JavaScript

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

1 Like
#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.

1 Like
#30

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

1 Like
#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

1 Like
#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

#34

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();
#35

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);
			}
		}
	});
});
1 Like