Streaming live at 10am (PST)

Add custom coded interaction to webflow.js


#1

Hello there,

I have found this article https://forum.webflow.com/t/override-webflow-js/34331 in which it was said to use this to override code in the webflow.js:

Like what? You can as long as you know what you are doing, as any error could possible cause the entire site to malfunction (including interactions).

The full code snippet should be

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  // Your code here...
});
</script>

and should be placed in the footer code before closing body tag.

When I use this though in this way:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  	Webflow.require('ix').init([
		  {"slug":"accordion-simple","name":"Accordion - Simple","value":{"style":{},"triggers":[{"type":"click","selector":".accordion-content","siblings":true,"stepsA":[{"height":"auto","transition":"height 400ms ease 0ms"},{"overflow":"visible"}],"stepsB":[{"overflow":"hidden"},{"height":"0px","transition":"height 400ms ease 0ms"}]},{"type":"click","selector":".accordion-icon","descend":true,"preserve3d":true,"stepsA":[{"transition":"transform 400ms ease 0ms","rotateX":"0deg","rotateY":"0deg","rotateZ":"-180deg"}],"stepsB":[{"transition":"transform 400ms ease 0ms","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}]}]}},
		  {"slug":"accordion-content-hide","name":"Accordion Content Hide","value":{"style":{"height":"0px","overflow":"hidden"},"triggers":[]}},
	]);
});
</script>

It overrides all interactions of the website and the two interactions inside the code above are the only ones that still function.

What I want to achieve though, is to only override the two interactions in the code above and not the complete interactions section.

In my desperation I butchered this code together in the hopes that this will do what I need it to do:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
	var require('ix') = Interactions
	Interactions.push ("
	  {"slug":"accordion-simple","name":"Accordion - Simple","value":{"style":{},"triggers":[{"type":"click","selector":".accordion-content","siblings":true,"stepsA":[{"height":"auto","transition":"height 400ms ease 0ms"},{"overflow":"visible"}],"stepsB":[{"overflow":"hidden"},{"height":"0px","transition":"height 400ms ease 0ms"}]},{"type":"click","selector":".accordion-icon","descend":true,"preserve3d":true,"stepsA":[{"transition":"transform 400ms ease 0ms","rotateX":"0deg","rotateY":"0deg","rotateZ":"-180deg"}],"stepsB":[{"transition":"transform 400ms ease 0ms","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}]}]}},
	  {"slug":"accordion-content-hide","name":"Accordion Content Hide","value":{"style":{"height":"0px","overflow":"hidden"},"triggers":[]}}
	")
});
</script>

But of course that didn't work. It would be amazing if someone has the time to look into this and help me out!

Thanks very much in advance!


Webflow & Bootstrap
#2

I was playing with this about a year ago and
eventually ran out of time (was working on it between projects).

I needed a way to dynamically add / remove pr-defined interactions.

Not sure... but it seems you are destroying / recreating the webflow object instead of modifying it.

Would have to dig into it further...